title: How to make image fit the whole screen and stay on the same position when I unzoom
body: <p>I'm trying to learn HTML5 and CSS, and I want to make a website about me, what I want is when the user opens the website the front screen to be fully covered with one image.</p>
  
  <p>I did this with setting the image height to 100vh and the width to 100%, however when I unzoom, the image starts repeating itself, I tried setting background-repeat to no-repeat however then the image stays in the upper left corner, is it possible to make it still stay in the full screen?</p>
  
  <p>Another thing, when I see the website on my small laptop screen it seems that the background image shows me just small part cut from the whole image, is it possible to show the whole full picture on my screen too?</p>
  
  <p>I'm still unexperienced in HTML5 and CSS, I tried searching this on Google however, there weren't many helpful articles.</p>
  
  <p>My HTML and CSS code is here:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;style&gt;
  #welcome-section {
      background-image: url(https://astrocampschool.org/wp-content/uploads/2019/01/Stars.jpg);
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
  }
  body {
      margin: 0px 0px 0px 0px;
  }
  
  #welcome-section &gt;* {
      margin: 8px 0px 8px 0px;
  }
  
  #welcome-section h1 {
      font-size: 50px;
  }
  
  #welcome-section p {
      font-size: 22px;
  }
  &lt;/style&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Andrej&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;section id="welcome-section"&gt;
      &lt;h1&gt;Hey, I'm Andrej!&lt;/h1&gt;
      &lt;p&gt;&lt;em&gt;developer and tech enthusiast&lt;/em&gt;&lt;/h1&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;&lt;/head&gt;
  </code></pre>