如何设置背景图像响应

Question

晚上好，我正在使用 "One page layout" 开发网站。而且我对移动响应有很大的问题。特别是在菜单和带有背景图像的部分。我会 post 我的代码如下，你能给我一些建议吗？要编辑什么？非常感谢！

HTML:

<div id="menu">
<div id="content">
<div id="logo">
<a href="#uvod"><img src="style/img/logo.png" border="0"></a>
</div>   
<div id="nabidka">
<ul>
   <li href="about"><a href='#about'>O nás</a></li>
   <li href="cenik"><a href='#cenik'>Ceník</a></li>
   <li href="sluzby"><a href='#sluzby'>Služby</a></li>
   <li href="kontakt"><a href='#kontakt'>Kontakt</a></li>
</ul>
</div>   
<div id="socsite">
<table style="width: 210px; height: 80px;" border="0">
<tr><td width="70"><a class="fb" href=""></a> </td>
<td width="70"><a class="twitter" href=""></a>    </td>
<td width="70"><a class="youtube" href=""></a>        </td></tr>
</table> 

</div>   
</div>  
</div>

<div id="uvod" class="section">
<div id="content">
...text text text...
   </div>
</div>

和CSS：

#uvod {
background:url('img/bg-uvod.png') top no-repeat fixed; 
float:left;
width: 100%;
min-height: 100%;
z-index: 1;
}

#menu {
background-color: #535353;
width: 100%;
height: 90px;
  padding: 0;
  margin: 0 auto;
  position: fixed;
top: 0;
z-index: 100; 
}

#logo {

width: 200px;
height: 90px;
margin-left: 1em;
  padding-top: 5px;
    float: left;
}
#nabidka {

width:550px;
height: 90px;

margin-left: 1.5em;
  padding-top: 5px;
float:left;

}
#socsite {

width:240px;
height: 90px;
  padding-top: 5px;
  margin-left: 7em;
  float: left;

}

#content {
width: 1200px;
margin: 0 auto;
}

Answer 1

您必须使用规则：

background-size: cover;

将此添加到您的 #uvod。

这将覆盖整个屏幕宽度，当您的屏幕变小时，它会随之缩小。

Answer 2

#uvod
{
  background: url('img/bg-uvod.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

为什么不试试封面呢？如果这不起作用，请尝试在背景中放置一个绝对位置 div，然后设置它的背景。

Answer 3

查看 background-size 属性。具体来说，contain 和 cover 值。

查看 MDN 上的文档了解更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

这也是一本好书： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

此外，请务必查看第一个 link 底部的浏览器兼容性 table 并确保它涵盖了您要寻找的浏览器。

如果您只针对现代浏览器，我可能还建议您考虑为背景图片使用 SVG，因为它们在任何尺寸下看起来都不错。

如何设置背景图像响应

How to set background-image responsive

css

background-image

responsive-design