Question

我有一个标题DIV，宽度为1400像素，包含一个必须始终保持居中的背景图像。

我的网站需要960px宽。

当我调整浏览器大小（缩小它）时，我不想要任何水平滚动条，直到我们达到960px，但是标题/背景上的较大宽度导致了这一点。

是否可以在调整大小时停止所有水平滚动条直到960px并保持标题div中的背景图像居中？

任何帮助表示赞赏！我在这里设置的一些代码用于快速测试...

http://jsfiddle.net/gVuvk 背景图像的宽度为1400像素。我需要滚动条从960px开始 - 不是1400px。这可能吗？

Answer 1

将#header宽度从固定像素更改为100%

演示：http://jsfiddle.net/wNSTD/3/

Answer 2

尝试摆弄最小宽度，如果不起作用，请使用边距，css auto-margins在这里很有用。所以，制作这样的结构：

<style>
.center_image
{
  margin: auto auto; // or you can modify the x or y seperately
  background-image:url("somesite.jpg");
}
</style>

<div class="outer">
  <div class="center_image">

Answer 3

将标题的宽度设置为100％并将背景图像居中。

background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
width: 100%;

演示：http://jsfiddle.net/post_erasmus/Hn6Zb/1/

CSS DIV滚动条和最小宽度的背景

3 个答案: