Background to cover entire screen

Question

Background to cover entire screen

142 Views Asked by Dribel At 11 April 2025 at 04:40

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?

Original Q&A

There are 4 best solutions below

lharby On 03 December 2014 at 10:50

I would make the position of the wrapper fixed, and add this css:

#backgroundLanding {
   position:fixed:
   top:0;
   right:0;
   bottom:0;
   left:0;
   background-size:cover;
}

But this means the content will never scroll. But I believe that is the desired effect.

Plus it will always fill the screen even if new content is added dynamically to the document.

Bhuvana On 03 December 2014 at 10:56

The parent Div's height depends on its child elements if you don't mention explicitly. That is why you see the background based on the child element.

Mention the necessary height to the parent. If you want it for the whole page, then you can give the background to the body.

Leo On 03 December 2014 at 10:56

If you want the background image to fill the container, use background-size: cover; can achive it and the image still remains its resolution ratio.

However, it looks like your problem is the container is not adapted to the browser window. It will be streched by its child nodes.

@lharby gives one solution. Another solution is like this:

html, body {height: 100%;} /* I assume #backgroundLanding is a child node of <body> */
#backgroundLanding {
  background-image: url('/assets/images/landing_new4.jpg'); 
  background-size: cover;
  height: 100%;
}

This is also what I used on my own blog.

**Katyoshah** · Accepted Answer

Katyoshah On 03 December 2014 at 10:47 BEST ANSWER

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

Background to cover entire screen

There are 4 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in BACKGROUND-IMAGE

Related Questions in COVER

Trending Questions

Popular # Hahtags

Popular Questions