背景图像宽1200px,体宽900px。

时间:2014-09-22 06:15:58

标签: html css

我需要你帮助我正在整理的网站。我是一个菜鸟,并且设计的机身设计宽度为900px,但它们给了我一个1200px宽的图像。他们希望图像跨越整个1200px宽,因此页面两侧基本上会有300px的重叠。我无法弄清楚如何做到这一点,任何帮助将不胜感激!

谢谢, 戴夫

3 个答案:

答案 0 :(得分:1)

实现他们想要的最好的选择是使图像成为CSS中的背景图像。

  1. 设置一个包含图像的div(作为背景),并将其放在页面上相对于您想要的位置。

    <div class="background"></div>`
    
  2. 使用内容填充div以获得高度或定义固定高度,例如400px。

    <style>
     .background {
        height: 400px;
        width: 100%;
      }
    </style>
    
  3. 现在,设置背景属性以达到您想要的效果。

    <style>
    .background {
     height: 400px;
     width: 100%;
     background-repeat: no-repeat;
     background-image: url(URL_TO_IMG);
     background-position: center center;
     background-size: cover;
    }
    </style>
    
  4. 这里的JSFiddle示例:

    jsfiddle

答案 1 :(得分:0)

您可以使用此代码:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}

覆盖你所拥有的确切空间。

答案 2 :(得分:0)

body{
    background: #ccc url(image_folder/image_name.extension) np-repeat 0 0 center;
}
#otherelement{
    /*Style Your Page Whatever you want...*/
}