CODEWITHSUNDEEP
htmlbackgroundposition
TsTeaTime
TsTeaTime

Reputation: 921

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>

Upvotes: 1

Views: 5823

Answers (3)

user6046568
user6046568

Reputation:

You should use background-attachment property with images.

background-attachment can have one out of two values. background-attachment: fixed|scroll;

position property is used to position html elements like div, p,etc.. So you can't use it with images.

You'll find this link useful

http://www.w3schools.com/cssref/pr_background-attachment.asp

Upvotes: 0

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

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;
  }

Upvotes: 4

ScaisEdge
ScaisEdge

Reputation: 133360

The mean html so the page must follow the HTML 5 rule

FROM MDN Css doc

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

Values

static

This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.

relative

This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

absolute

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context. When an ancestor has the transform property set to something different than none then this ancestor is used as container instead of the viewport

Upvotes: 1

Related Questions