Adding margin to div does not move placement of background

I'm trying to align the background image of a div to the top of the div, but it continues to align it to the top of either the parent div or the whole page (I'm not sure which one, but I think it's page)

JSFiddle: https://jsfiddle.net/Minecraft_Percabeth/1wbuduze/2/

The background image of the #bottom div should show over the top of their heads, but instead the top is aligned to the top of the #wrap div. Edit: The image should also stay where it is when scrolling down, which is why I'm currently using fixed.

Change the margin-top to 0 to see what I mean.

<div id="wrap">
    <div id="bottom"></div>
</div>

#wrap {
    background-color: yellow;
    height: 500px; width: 500px;
    position: absolute;
}
    #bottom {
        background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
        height: 400px; width: 500px;
        margin-top: 100px;
    }

---

The fixed in
background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
Is the shorthand for background-attachment: fixed;
That is why the background image is fixed to the top "the page".
Without this property the background image moves to margin-top: 100px;

Edit:

In order to move the background image vertically, you can use background-position: center XY%; and add again background-attachment: fixed;

#bottom {
    background-image: url("http://i.imgur.com/BsTVroc.jpg");
    background-repeat: no-repeat;
    background-position: center 20%;
    background-attachment: fixed;
    height: 400px;
    width: 500px;
    margin-top: 100px;
}
#wrap {
    background-color: #737373;
    height: 500px;
    width: 500px;
    position: absolute;
}

<div id="wrap">
    <div id="bottom"></div>
</div>

---

You can use background-position: center 100px; - this will move the background image down by 100px.

链接地址: http://www.djcxy.com/p/87780.html

上一篇: 重写CSS样式行为，而不使用！重要或内联样式表

下一篇: 为div添加边距不会移动背景的位置