Как вставить в эту область фото?

Question

ZhukovMisha @ZhukovMisha

ʞɔıp ʎɯ ʞɔns ʇsnɯ noʎ ‘uoıʇsǝnᕹ ʎɯ uo ɹǝʍsuɐ ɐ ʇou

HTML
CSS

Как вставить в эту область фото?

Как вот в эту область вставить фотку?

Вот код(заранее предупреждаю!!! Код не первого уровня качества!!)

<!DOCTYPE html>
<!--Website created by Zhukov Misha for "Letovo"-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parallax is cool</title>
  <style>
  @font-face {
  font-family: 'Future';
  src:url('C:/Users/Admin/Desktop/fonts/future.woff2') format('woff2')
  }
  html {
    height: 100%;
    overflow: hidden;
  }
  body {
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: 'Future', bold;
    color: #fff;
  }
  header {
    margin-top: -317px;
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 20%;
    transform-style: inherit;
    width: 100vw;
  }
  header::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
    transform-origin: center;
    min-height: 100vh;
    background-color: rgb(30, 30, 30);
  background-repeat: no-repeat;
    background-size: cover;
    transition: 1s;
    /* Параллакс */
    transform: translateZ(-1px) scale(2);
  }

  header h1 {

    margin-left:9vh;
    margin-bottom: 500px;
    font-size: 170px;
  }
  img{
    margin-bottom: inherit;
    margin-right: inherit;
    margin-top: inherit;
    margin-left: inherit + 100px;
  }
  </style>
</head>
<body>
  <header id="block1">
    <h1> Misha<br>Zhukov </h1>
  </header>
</body>

А вот тот отрезок который можно назвать самым важным

header {
    margin-top: -317px;
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 20%;
    transform-style: inherit;
    width: 100vw;
  }
  header::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
    transform-origin: center;
    min-height: 100vh;
    background-color: rgb(30, 30, 30);
  background-repeat: no-repeat;
    background-size: cover;
    transition: 1s;
    /* Параллакс */
    transform: translateZ(-1px) scale(2);
  }

  header h1 {

    margin-left:9vh;
    margin-bottom: 500px;
    font-size: 170px;
  }
  <header id="block1">
    <h1>Misha <br> Zhukov</h1>
  </header>

Когда я вставляю фотку 400 на 200 у меня либо:
Фотка между именем и фамилием, либо снизу h1
Я только изучаю фронтенд, но как это решить...
:):):)