CSS背景图像位置移动到较大的浏览器窗口的中心

Question

我无法在页面底部的DONATE后面获得橙色背景，以便留在更大的浏览器窗口中。我已经尝试过我能找到的每一个css技巧。请帮忙！

谢谢， 珍

http://dev30.ncld.org/

Answer 1

你错过了这个技巧：

#footer .footer-col-orange {
    margin-left: 790px; // adjust accordingly
    left: initial;
}

这将使您的捐赠框相对于页脚元素，而不是左页边框，并将适用于所有显示。

另一个选项是将#footer .padding元素的位置设置为relative。

Answer 2

你去了：

#footer .padding {
/* padding: 15px 20px 0px 100px; */
width: 1010px;
/* position: absolute; */
margin-left: auto;
margin-right: auto;
background-color: #0A6DA1;
padding-top: 15px;
position: relative; /* First part */
}

#footer .footer-col-orange {
position: absolute;
/* background-position: right; */
right: -2em; /* second part, feel free to put what you want */
}

设置位置时：绝对;对于一个元素，它会将它从HTML流中拉出来，你可以给它坐标（上，左，右;下）。 此坐标相对于具有相对位置的第一个父级。由于您没有将任何父元素设置为相对元素，因此您将元素相对于文档定位。

Answer 3

如您所知，您的橙色盒子当前位置绝对正确。这意味着它是相对于浏览器窗口的。该窗口的左边缘，因为你有'left：900px'。我们想要的是它相对于以页脚为中心的页脚。

为此，我们需要将橙色框的父容器设置为position:relative。这将导致橙色框的位置依赖于它的父级而不是窗口。

#footer .padding {
    position:relative;
}

然后，只需将黄色框设置到正确位置即可。鉴于它位于右侧，我将完全删除left值并改为设置right:-45px。

#footer .footer-col-orange {
    left:auto;
    right:-45px
}

通过这些，它将与上面白框的边缘完美对齐：

您将遇到内联样式的问题。您不仅可以通过CSS应用您的样式，而且它们是内联重复的。您将需要在我提供的新CSS中设置!important（不是最佳做法），或者更好，删除内联样式。如果您提供有关如何构建侧面的更多信息（WordPress，HTML模板等），我可以帮助您删除内联样式。