负边距和背景图像无法正确显示答案

【问题标题】：Negative margin and background image not displaying properly负边距和背景图像无法正确显示
【发布时间】：2012-03-28 12:13:33
【问题描述】：

您好，我正在尝试在页面的左下方创建背景图片。该页面有一个左右侧边栏。我已经使用 css 将图像放置在左侧边栏和主要内容中，并且都没有正确放置。

这是我想要的样子：http://www.onetreehill.net.au/images/image2.jpg（底部的女孩。我希望她位于页面的最左下角，无论页面有多长。）

这就是她现在使用我使用的 CSS 的方式：http://www.onetreehill.net.au/images/image1.jpg

我用过的CSS：

.Content {
background: url(../../__custom/images/blue/page-bottom-1.jpg) left bottom;
background-repeat: no-repeat; 
overflow: visible;
}

.Left {
background: url(../../__custom/images/blue/page-bottom-1.jpg) left bottom;
background-repeat: no-repeat; 
overflow: visible;
}

当我使用以下作为背景位置时：背景：

url(../../__custom/images/blue/page-bottom-1.jpg) -150px 100%;

【问题讨论】：

请向您展示代码/小提琴/演示站点，以便我们可以轻松指出您遇到问题的确切位置。

标签： css image background margin

【解决方案1】：

您能向我们展示您的 HTML 吗？我怀疑.Left 并没有一直到达列的底部，但是如果没有看到标记很难说。

【讨论】：

【解决方案2】：

如果你能展示你的 html 就很容易回答了。您可以尝试的一件事是将背景图像提供给主容器 div（可能是左侧 div 的父级）。

如果你的代码是这样的

<div class="main-container">
   <div class="left"></div>
   <div class="content"></div>
   <div class="right">

那么你的风格会是

.main-continer {

 background: url(../../__custom/images/blue/page-bottom-1.jpg)no-repeat scroll  left bottom ;
}

希望这会有所帮助..

【讨论】：