未覆盖全屏幕的背景图片

我正在构建一个向下滚动的网页类型网站，其中每张幻灯片都是一个页面。在最后一张幻灯片中，背景图片以某种方式呈现，并且只有一个空白区域。在该幻灯片的ID中所使用的CSS：未覆盖全屏幕的背景图片

#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; }

这里有一个打印： http://postimg.org/image/489mxfagt/

任何解决方案？

来源

2014-06-12 user3375665

的jsfiddle请 – Jatin

这可能是因为#seven不伸展到页面底部。如果你提供HTML和相关的CSS，我们可以检查出来。 –

您可以使用背景大规模属性：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

来源

2014-06-12 01:10:55 volter9

如果你支持现代浏览器，你可以做以下。

#seven { 
    background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */ 
}

或者，你可以把你的形象在img标签的容器内，无论是使用fixed或absolute定位容器的位置。接下来，给它一个宽度100%和高度100%或top, left, right, bottom值0，同时隐藏溢出。最后，将img宽度设置为width: auto和height: 100%并使用display: block。 Example here。使用

来源

2014-06-12 04:58:50 lindsay

CSS背景图像

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

否则你可以试试下面的代码一些其他的方式正常工作从IE7

CSS代码

#bg { 
position: fixed; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%; 
} 

#bg img { 
position:absolute; 
top:25%;left:25%; 
right:25%;bottom:25%; 
margin:auto; 
min-width:50%; 
min-height:50%;}

HTML代码

<div id="bg"> 
    <img src="images/Body-bg.png" alt=""> 
</div>

来源

2014-06-12 05:06:04 sarath

只需添加.bgwidth {width：100％; } .bgheight {height：100％; }

这将消除问题

来源

2016-06-27 07:27:11

未覆盖全屏幕的背景图片

回答

相关问题