html背景图片自适应屏幕大小

html背景图片自适应屏幕大小

背景图片写在body标签的css样式里，“background:url (图片地址) center no-repeat;”——“固定图片位置”；“background-size:100% 100%;”-“设置自适应屏幕大小”。

添加背景图片样式

body{background: url(“图片地址”) center no-repeat;}，把背景图片写在body标签css样式的background属性中，center表示图片居中显示，no-repeat表示一张图片不平铺。

设置背景图片大小

在body的css样式中添加background-size: 100% 100%;表示图片纵向横线都100%显示。

设置页面高度100%

body标签中没有内容时图片只显示一行，我们可以添加“html{height:100%}”给页面设置一个高度。

这样图片就会自适应屏幕大小

注意这种方法需要选择合适的图片，图片会根据浏览器窗口大小形状而改变。