网站背景图像居中并固定？

我正在一个网站有一个固定的宽度股利的中心，我想有两个设计的div的任何一方，我可以得到使用两个div。问题是我这样做，这些图像添加到网站的宽度，导致如果窗口太小，出现水平滚动条。即使整个内容div适合在屏幕上。网站背景图像居中并固定？

CSS

.container { 
    margin: 0 auto; 
    width: 500px; 
} 

.span { 
    margin-right: 0; 
    width: 500px; 
} 

.logo { 
    margin-top: 25px; 
} 

.logo-img { 
    height: 60px; 
    left: -21px; 
    position: relative; 
} 

.swirls { 
    height: 0px; 
} 

.left-swirls { 
    position: relative; 
    top: -50px; 
    right: 100px; 
    width: 188px; 
    z-index: -1; 
} 

.right-swirls { 
    position: relative; 
    top: -50px; 
    left: 215px; 
    width: 200px; 
    z-index: -1; 
} 

.nav { 
    background-color: #0ff; 
} 

.content { 
    background-color: #00f; 
    height: 200px; 
}

HTML

<div class="container"> 
     <div class="span logo"> 
      <img src="http://imageshack.us/a/img839/2507/logongv.png" class="logo-img"/> 
     </div> 
     <div class="span swirls"> 
      <img src="http://imageshack.us/a/img831/3254/leftswirls.png" class="left-swirls" /> 
      <img src="http://imageshack.us/a/img600/7424/rightswirls.png" class="right-swirls" /> 
     </div> 
    <div class="span last nav"> 
     Nav Bar 
    </div> 
    <div class="span content"> 
     Body content 
    </div> 
</div>

问题的一个例子可以看这里：

我试图让背景图像（S）相对于中心div而不是浏览器的边。

有没有一种方式来居中一个背景图像就像一个div与边距：0自动？

来源

2012-12-14 LF4

如果你想.left-swirls和.right-swirls不添加到文档的宽度，那么他们应该是背景图像。（现代浏览器，多背景图片做工精细。）

例子：http://jsfiddle.net/MbGSP/1/

body { 
    background: url(http://imageshack.us/a/img831/3254/leftswirls.png) center center no-repeat, 
       url(http://imageshack.us/a/img600/7424/rightswirls.png) center center no-repeat; 
}

您可以居中背景图像，水平和垂直，与center center的位置。

来源

2012-12-14 21:16:43 KatieK

这是正确的我试图让他们作为背景图像，但有这样做的问题。如果浏览器展开，则图像拥抱边缘，因为它们位于左侧和右侧，而不是相对于主内容div定位。 – LF4

背景图像是防止它们影响文档流动的最佳解决方案。你希望图像在不同大小的窗口中表现如何？您可以在任何元素上指定背景图像，并将定位更改为像素或％而不是左侧或中心。 – KatieK

我希望背景图像能够随时拥抱div，但是如果它们调整浏览器窗口的大小以便它适合内容div，那么将不会是水平滚动条。在我的例子中，如果你调整了框架的宽度，你会看到“背景图像”与内容div保持一致。是否有可能在页面上居中放置一个背景图像，以便与设置有边距的div排列在一起：0 auto;？ – LF4

网站背景图像居中并固定？

回答

相关问题