TsTeaTime TsTeaTime - 4 months ago 19
HTML Question

position: fixed with background image?

When I add the

<!DOCTYPE HTML>
on the page I am finding that I have to add
position: fixed;
into the CSS in order for the image to show up as the background on the "div" otherwise I get a blank, white background. Why does this require that position = fixed in this case?

.background_image{
position: fixed; <-----Why is this needed & Why doesn't static work?
background: #000 url(../Images/Image.jpg) center center;
width: 100%;
height: 100%;
min-height:100%;
background-size: cover;
overflow: hidden;
}


Here is the sample html. There is obviously other elements within the div and I am importing the css through a link in the header.

<body>
<div class="background_image">
</div>
</body>

Answer

This happens, because height: 100% works in position: fixed. When you remove this position, it doesn't take this height. So, there is another way to do this. You can use vh units. Remove position fixed, and add this background this css:

 .background_image{
  height: 100vh;
  background: #000 url(../Images/Image.jpg) center center;
  width: 100%;
  min-height:100%;
  background-size: cover;
  overflow: hidden;
  }