CSS:100%宽度和背景?

CSS:100%宽度和背景?,css,background,width,Css,Background,Width,在我的页面中,有2-3个部分具有100%的宽度和背景。当我全屏打开时,一切正常,但当屏幕小于960px(本节内容宽度)时,背景图像不是整个页面。右边的whis隐藏在第一个瞬间,没有背景-它是白色的。你可以看到我在这里的意思:使用背景最小宽度:960px;代替宽度:100%; 干杯只需将背景大小:100%样式添加到应用背景图像的元素中即可。适用于Firefox、Safari和Opera。例如: <style> .divWithBgImage { width: 100%; hei

在我的页面中,有2-3个部分具有100%的宽度和背景。当我全屏打开时,一切正常,但当屏幕小于960px(本节内容宽度)时,背景图像不是整个页面。右边的whis隐藏在第一个瞬间,没有背景-它是白色的。你可以看到我在这里的意思:

使用背景最小宽度:960px;代替宽度:100%;
干杯

只需将
背景大小:100%
样式添加到应用
背景图像的元素中即可。适用于Firefox、Safari和Opera。例如:

<style>
.divWithBgImage {
  width: 100%;
  height: 600px;
  background-image: url(image.jpg);
  background-repeat: no-repeat;
  background-size: 100%; //propotional resize
/*
  background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
  some contents
</div>

.divWithBgImage{
宽度:100%;
高度:600px;
背景图片:url(image.jpg);
背景重复:无重复;
背景大小:100%;//按比例调整大小
/*
背景大小:100%100%;//拉伸调整大小
*/
}
一些内容
关于文章,您还应该使用
封面

html { 
  background: url(PATH_TO_IMAGE) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

请阅读:您可以在中找到有用的信息