如何通过css设置背景图片全屏
程序员文章站
2022-04-03 12:58:48
...
通过css设置背景图片全屏的方法:1、通过CSS的【background-size=100%】属性设置全屏;2、通过【background-repeat】设置图片是否重复。
本教程操作环境:windows7系统、css3版,DELL G3电脑。
通过css设置背景图片全屏的方法:
1、创建以下目录结构的测试页面
BackGround
-- BgImage.html
-- Images
-- bg.png
2、将测试图片显示在浏览器界面上,效果如下
3、通过CSS设置背景图片,默认效果如下,图片被自动重复以铺满窗口
4、通过CSS设置背景图片不重复,此时,图片将不能铺满窗口
5、通过CSS设置图片大小100%,效果如下,图片铺满窗口
6、通过CSS设置图片大小cover,效果如下,图片铺满窗口
相关教程推荐:CSS视频教程
以上就是如何通过css设置背景图片全屏的详细内容,更多请关注其它相关文章!
推荐阅读
-
如何设置网页中的一段文字,使它的宽度是页面宽度的62%且能自动换行?_html/css_WEB-ITnose
-
如何在VS2008中将背景图片拉伸至整张页面而不是平铺_html/css_WEB-ITnose
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
css设置背景图片和背景颜色都不显示_html/css_WEB-ITnose
-
css如何设置不规则阴影
-
css如何设置br高度
-
css如何设置字体平滑
-
CSS实现网页背景图片自适应全屏详解
-
css如何设置背景图片的平铺方式?css设置背景图片平铺的方法(图文详解)
-
如何设置背景图片不随着文本内容的滚动而滚动