Home > Article > Web Front-end > 网页背景图片全屏设置_html/css_WEB-ITnose
网页背景图片全屏设置_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:502501browse
1.首先设置body的高度为100%，overflow属性设为hidden(溢出隐藏)
2.body内div宽和高都设为100%,overflow属性设为hidden ,z-index:-1（确保背景图片在最下面）
3.设置div内的img宽高都为100%;
html 代码如下：<br /><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="css/login_one.css" rel="stylesheet" /> <script src="../../javascript/jquery-1.8.3.js"></script> <script type="text/javascript"> </script></head><body> <div id="lay_bg" class="lay_background"> <img id="lay_bg_img" class="lay_background_img" src="img/20151105165147_de95cb.jpg"/ alt="网页背景图片全屏设置_html/css_WEB-ITnose" > </div></body></html><br /><br /><br /><br />
css代码如下：<br />body { background: #888 none repeat scroll 0 0; font-family:'Microsoft YaHei'; height:100%; margin:0; padding:0; overflow:hidden;}.lay_background { width:100%; height:100%; z-index:-1; overflow:hidden;}.lay_background_img { width:100%; height:100%;}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS秘密花园:磨砂玻璃效果_html/css_WEB-ITnoseNext article：html5/css3响应式布局介绍_html/css_WEB-ITnose