简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

网页背景图片全屏设置_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:30:50
Original
2487 people have browsed it

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 />
Copy after login

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%;}
Copy after login

 

 

Related labels：
网页背景图片全屏设置
source：php.cn
Previous article：CSS秘密花园:磨砂玻璃效果_html/css_WEB-ITnose Next article：html5/css3响应式布局介绍_html/css_WEB-ITnose
Statement of this Website
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
Latest Articles by Author
Latest Issues
After copying website to local, WordPress homepage redirects to duplicate copy Background: I have multiple websites running on rpi4 using nginx and wordpress. I want to ...
From 2024-03-31 15:26:18
0
2
280
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！