Search code examples
htmlcssbackground-imagecover

Background to cover entire screen

I have a background image which covers my entire scree. However, once I add elements to my html file, the background image only covers the area of this new element, the rest is going to be white.

How can I make sure, that the background continues after my element until the bottom of my screen?

#backgroundLanding {
  background: url('/assets/images/landing_new4.jpg'); 
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
  top: 0;
}

<div id="backgroundLanding" >


  <div>
  <!--Flight Search Directive-->
  <!--flight-search>
  </div>


    <!--impressum></impressum-->
  </div>
</div>

If I use background-size:cover, it'll show the same. How can I solve this?

Solution

  • the problem is not with your background image, you should check the width of your main wrapper and set it to 100% to fit any screen size