我在这里具有这种CSS样式,但是它跨越了整个屏幕,而不仅仅是在身体的960px宽度内重复。
body
{
width:960px;
margin: 10px auto 10px auto;
background-image:url(logo.png),url(backgroundimage.jpg);
background-position: top center, top center;
background-repeat: no-repeat, repeat-x;
background-attachment: static;
}
logo.png只是公司徽标的图像,而backgroundMimage.jpg我只想在960px内而不是整个页面中跨越。我该怎么做?
您需要进行容器类。此类将拥有所有内部DIV类和内容。
代码将如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.container{
width: 960px;
background: url("logo.jpg");
height: 700px;
}
</style>
<body>
<div class="container">
</div>
</body>
</html>
这样做的一种更简单的方法是使用bootstrap。Bootstrap框架提供了一个.Container类预制,并具有内置的自定义响应。