Question

我的网页上有一张1250像素宽的图像。示例：http://img694.imageshack.us/img694/6171/unledvla.jpg

我有一张低于950px宽图像的div。

我希望如此，当我将窗口大小减小到950px宽时，图像就会＃34;居中＆＃34;并且150px绿色区域（在1250px图像的左侧和右侧）不可见。

这可能吗？

这是我目前的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{margin:0;padding:0}
div#container{background:green;width:950px;margin:0 auto}
</style>

</head>

<body>

<div style="width:1250px;background:url('image-1250px.jpg') 0 0 no-repeat;height:360px;margin:0 auto">&nbsp;</div>

<div id="container">

<div id="header"><h1>Header</h1></div>

    <div id="wrapper">

        <div id="content">
        <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
        <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
        <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>

        <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
        </div>

    </div>

</div>

</body>
</html>

非常感谢您提出的任何指示。

Answer 1

（1）将背景图像的位置样式从“0 0 no-repeat”更改为“top center no-repeat”。（2）删除“width：1250px;”，因为这会在窗口大小减小时导致水平滚动。

为了实现我认为您所描述的内容，您需要背景图像本身为1250px宽。

Answer 2

我认为你可能要做的就是将背景图像居中，让#container出现在白色中心区域内。

要执行此操作，您需要将正文背景设置为图像并使其水平居中，然后垂直重复以填充垂直浏览器区域：

body {
  background-image: url('image-1250px.jpg');
  background-position: center;
  background-repeat: repeat-y;
  background-color: green;
}

时间处理#container。我们将其设置为950px宽，并将边距设置为自动以使元素居中。

#container {
  width: 950px;
  margin-left: auto;
  margin-right: auto;
}

您应该尝试远离内联CSS样式。

Answer 3

是否必须继续使用div？它不能继续你的身体标签吗？

body { background: url('http://img694.imageshack.us/img694/6171/unledvla.jpg') repeat-y center top; }

将一个1250像素宽的图像置于950px宽的div-CSS问题中

3 个答案: