如何修复div里面的背景图片 [英] How to fix background image inside div

问题描述

我发现了一个很奇怪的问题，我认为我知道如何解释;我只是不知道如何解决它！

我有一个页面与div＃容器（一个div与100％最小高度（IE的高度）包含标题，页面内容和页脚。 div＃container的背景图片应该是固定的（不是固定的位置，而是 background-attachment：fixed ，这使得在滚动时照片跟随）。

问题是，当固定附件被添加到CSS中的background-tag时，背景图片现在位于div之外。

CSS如下：（无 background-attachment：fixed; ）

  div＃container {
 position：relative; 
 width：900px; 
 margin：0 auto; 
 background-color：#ccffff; 
 background-image：url（pics / sign.jpg）; 
 background-repeat：no-repeat; 
 background-position：right top; 
 
 height：auto！important; 
 height：100％; 
 
 min-height：100％; 
} 
  

margin：0 auto; 是以div为中心，第一个 height：中的！important 高度标签。这是必需的，如果 min-height：100％应该工作。

p>

  div＃container {
 position：relative; 
 width：900px; 
 margin：0 auto; 
 background-color：#ccffff; 
 background-image：url（pics / sign.jpg）; 
 background-attachment：fixed; //这是添加到代码示例
 background-repeat：no-repeat; 
 background-position：right top; 
 
 height：auto！important; 
 height：100％; 
 
 min-height：100％; 
} 
  

...背景图片正在移出div。让我解释一下：背景图片的唯一可见部分是仍然在< div id =container> 内，但图像的一部分已移动

总结...

当背景图像固定时，背景图像被部分隐藏，移动到div之外。图片位于浏览器窗口的右上角，而不是div的右上角。

希望你们能帮助我！

解决方案

这种行为其实是正确的。任何背景为 attachment：fixed 将是相对于视口，而不是它应用于的元素。这实际上是Eric Meyer的复杂螺旋演示的基础。 p>

I've discovered a rather odd problem, which I think I know how to explain; i just don't know how to fix it!

I have a page with a div#container (a div with 100% min-height (height for IE)) containing a header, a "page-content" and a footer. The background image of the div#container is supposed to be fixed (not fixed position but background-attachment: fixed which makes the picture follow when you scroll).

The problem is, that when fixed attachment is added to the background-tag in CSS, the background picture is now positioned outside the div.

The CSS is as follows: (without background-attachment: fixed;)

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

margin:0 auto; is to center the div and the !important thing in the first height: is to make IE ignore that particular height-tag. This is required if min-height: 100% should work.

When I add this...

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-attachment: fixed; //This is what is added to the code-sample
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

...the background picture is moving outside of the div. Let me explain this: The only visible part of the background image is what is still inside the <div id="container"> but a part of the image has moved outside the div and is now invisible.

To sum up...

When the background image is fixed, the background image is partly hidden, moving outside the div. The image is positioning to the top right of the browser window, not to the top right of the div.

Hope you guys can help me!

解决方案

This behavior is actually correct. Any background which is attachment: fixed will be relative to the viewport, not the element it is applied to. This is actually the basis of Eric Meyer's Complex Spiral demo.

这篇关于如何修复div里面的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！