1、设置背景图尺寸background-size的方式:
设置背景图片的尺寸:background-size: length|percentage|cover|contain;
length|percentage:两个值,第一个值为宽、第二个值为高,如只设定一个值,第二个值为auto。
cover:拉伸背景图片短边尺寸,实现短边全覆盖,长边尺寸等比例拉伸,可能会超出背景定位区域边界。
contain:拉伸背景图片长边尺寸,实现长边全覆盖,短边等比例拉伸,可能无法完全覆盖背景定位区域边界。
使用场景:如果为了背景图全覆盖,则使用cover;如果为了最大化完整显示背景图,则使用contain。
/*
设置背景图片的尺寸:background-size: length|percentage|cover|contain;
length|percentage:两个值,第一个值为宽、第二个值为高,如只设定一个值,第二个值为auto。
cover:拉伸背景图片短边尺寸实现短边全覆盖,长边尺寸等比例拉伸,可能会超出背景定位区域边界。
contain:拉伸长边尺寸实现长边全覆盖,短边等比例拉伸,可能无法完全覆盖背景定位区域边界
*/
background-size:cover;
background-attachment:fixed;/* 当页面的其余部分滚动时,背景图像不会移动。 */
background-color:#2D3032 ;
background-image:url(image/background.jpg);
background-repeat:no-repeat;
background-position:center center;
/* background:#2D3032 url(image/background.jpg) no-repeat center center fixed; */
2、如果背景图所在元素未设置宽高尺寸,背景图无法显示,可通过css定位设置偏移量实现
/* 当页面的其余部分滚动时,当前元素不会移动。 */
position:fixed;
/* 让这个层充满整个屏幕 */
left:0;
right:0;
top:0;
bottom:0;
3、通过设置display;table、display;table-cell布局,实现居中效果,辅加vertical-align:middle;text-align:center;属性值设置
/* table布局,实现居中效果 */
.wrap{
display:table;
margin:0 auto;
height:94