Hugh's Blog

CSS 背景图片铺满

想要把一张图片作为背景图,由于图片太大,总是不能完全显示,只能显示一部分,google 之,原来是 background-size 没设置好,做个记录。

body {
    background: url("bg.jpg") no-repeat;
    background-size: 100% 100%;
}

size 用来获取背景图片,100% 是把整张图片铺满背景

2015-09-01

今天工作中又遇到:(

使用 css3 的方法。

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

主要还是 background-size: cover 这个属性。

使用: background-size: length|percentage|cover|contain;

length (一般是 px 值) 设置背景图像的高度和宽度;第一个值设置宽度,第二个值设置高度;如果只设置一个值,则第二个值会被设置为”auto”

percentage (百分比) 以父元素的百分比来设置背景图像的宽度和高度;第一个值设置宽度,第二个值设置高度;如果只设置一个值,则第二个值会被设置为”auto”

cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中

contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

这是一个简单的测试页面:测试


参考

CSS: stretching background image to 100% width and height of screen?

完美的背景图全屏css代码 – background-size:cover?

CSS3 background-size 属性