How do I keep the width fixed in css?-CodePudding

In a hero section, how do I keep the width of the background fixed while only changing height?

Html:

<section id="hero">
<div class="container">
  <div class="info">
  <div class="img"></div> 
    <h1>This is a title</h1>
    <h2>Lorem ipsum dolor sit amet consectetur.</h2>
  </div>
  </div>
 </section>

Css:

#hero{
 height: 100vh;
 width: 100%;
 background: linear-gradient(rgba(0, 0, 0, 0.089), rgba(0, 0,   0, 0.089)), url(images/backgroundheader.png) no-repeat center /   cover;
 }

I want to be able to see all of the image from left to right and only change height while I resize the browser.

Currently, when I resize the browser the edges of the image(left and right) disappear.

CodePudding user response：

Use the tag element which is the height of the browser window.

html { background: background: linear-gradient(rgba(0, 0, 0, 0.089), rgba(0, 0, 0, 0.089)), url(images/backgroundheader.png) no-repeat center fixed;

background-size: cover; }