缩小时的背景图像解决方案

Question

我有一个PSD模板将其转换为HTML。当我缩小浏览器时，如何处理背景食物图像（图像上突出显示为红色）？总宽度为1300px，容器为1000px。什么是最好的方法？我重复一遍吗？怎么样？你会怎么做？谢谢。

Answer 1

请试试这个：

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

Answer 2

基本上你可以通过两种方法完成这项工作......

1. 使用3个不同的div来解决问题。

<div class="left-div"><img src="food_img1.ong"/></div>
<div class="inner-div">Here goes main container</div>
<div class="right-div"><img src="food_img2.ong"/></div>

1. 尝试使用上面用户Satya给出的方法，

   html,body{
      background:#333333 url(../img/bg/bg3.jpg) no-repeat center center;
      background-size: cover;
   }