[英]CSS Stretched Background Image
I have a large image to be use as a background-image
of a page. 我有一个较大的图像可用作页面的
background-image
。 What I want is that the height of the image will be stretched to fill the height of the page. 我想要的是图像的高度将被拉伸以填充页面的高度。 It should be centered also.
它也应该居中。
background: black url("/image/background.jpg") no-repeat fixed center;
background-size: cover
will do the trick in modern browsers - see mozilla's documentation for more details. background-size: cover
可以在现代浏览器中解决问题-有关更多详细信息,请参见mozilla的文档 。
For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour. 对于较旧的浏览器(尤其是IE的较旧版本),我已经在使用类似这种 jQuery插件的行为方面取得了很多成功。
here is a good writeup 这是一个很好的文章
http://css-tricks.com/perfect-full-page-background-image/ http://css-tricks.com/perfect-full-page-background-image/
the gist of it being 它的要旨
body {
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;
}
add this to the css 将此添加到CSS
{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}
I think using a div would be the easiest way to get the effect you are looking for. 我认为使用div是获得所需效果的最简单方法。
<div id="background">
<img src="/image/background.jpg" class="stretch" alt="" />
</div>
<style>
#background {
background-color:#000000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:100%;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.