CSS背景图像仅跨度为960px



我在这里具有这种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类预制,并具有内置的自定义响应。

最新更新