位置：用背景图片固定？

Question

When I add the <!DOCTYPE HTML> on the page I am finding that I have to add position: fixed; 当我在页面上添加<!DOCTYPE HTML>时，我发现我必须添加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. 进入CSS，以便图像显示为“div”的背景，否则我得到一个空白的白色背景。 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. 这是示例html。 There is obviously other elements within the div and I am importing the css through a link in the header. div中显然还有其他元素，我通过标题中的链接导入css。

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

Answer 1

This happens, because height: 100% works in position: fixed . 发生这种情况，因为height: 100%适用于position: fixed 。 When you remove this position, it doesn't take this height . 当您移除此位置时，它不会占用此height 。 So, there is another way to do this. 所以，还有另一种方法可以做到这一点。 You can use vh units. 你可以使用vh单位。 Remove position fixed , and add this background this css : 删除fixed位置，并将此背景添加到此css ：

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

Answer 2

The mean html so the page must follow the HTML 5 rule 平均html因此页面必须遵循HTML 5规则

FROM MDN Css doc 来自MDN Css doc

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects. 位置CSS属性为定位元素选择替代规则，旨在用于脚本动画效果。

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. top，right，bottom，left和z-index属性不适用。

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. position：relative对表 - * - group，table-row，table-column，table-cell和table-caption元素的影响未定义。

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 当一个祖先将transform属性设置为不同于none时，则此祖先用作容器而不是视口

Answer 3

You should use background-attachment property with images. 您应该对图像使用background-attachment属性。

background-attachment can have one out of two values. background-attachment可以有两个值中的一个。 background-attachment: fixed|scroll; background-attachment：fixed | scroll;

position property is used to position html elements like div, p,etc.. So you can't use it with images. position属性用于定位html元素，如div，p等。所以你不能将它用于图像。

You'll find this link useful 你会发现这个链接很有用

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

位置：用背景图片固定？

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-07-31 09:12:22

解决方案2
1 2016-07-31 09:10:51

解决方案3
0

位置：用背景图片固定？

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-07-31 09:12:22

解决方案2 1 2016-07-31 09:10:51

解决方案3 0

解决方案1
2 已采纳 2016-07-31 09:12:22

解决方案2
1 2016-07-31 09:10:51

解决方案3
0