div背景图像覆盖HTML网页整屏

1、编写HTML的样式：

<style>

*{margin:0 ;padding:0}

.fullimg{background: url(timg.jpg) center center no-repeat;background-size:100% 100%}

.fullimg1{background: url(logo.jpg) center center no-repeat;background-size:100% 100%}

</style>

这里有两幅图像分别作为div的背景，图像水平和垂直居中，宽高覆盖其div容器的全部，即宽高完全显示，所以图像为适应容器而会变形。

2、编写HTML的内容

<div class="fullimg" id="fullimg"></div>

<div class="fullimg1" id="fullimg1"></div>

样式fullimg和fullimg1在上文已经规定样式，覆盖其div的全部，但div没有规定样式，div默认宽度为100%,宽度已经满屏，只需设定div的高度=浏览器窗口高度即可，这个过程使用下步的JS或JQuery，若使用js，需在div中指定id=""，而JQuery则不需要添加

3、首先使用js，

<script>

var fullimg = function(){

var wh=window.innerHeight;

var fullimg=window.document.getElementById("fullimg");

var fullimg1=window.document.getElementById("fullimg1");

fullimg.style.height=wh;

fullimg1.style.height=wh;

}

fullimg()

</script>

这段规定了一个名为fullimg的过程，最后的fullimg()则是调用此过程。

var wh=window.innerHeight;  获取浏览器窗口的高度。

var fullimg=window.document.getElementById("fullimg"); 获取ID为fullimg的元素；

fullimg.style.height=wh; 设置fullimg样式中高度=浏览器高度。

最后调用此过程，完成div高度=浏览器高度。

4、换成jQuery:

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

<script>

var fullimg=function(){

var wh=window.innerHeight;

$('.fullimg').height(wh);

$('.fullimg1').height(wh);

}

fullimg()

</script>

使用jQuery得加载jQuery，也同样建立一个名为fullimg的过程

var wh=window.innerHeight; 这是js语法，获取浏览器窗口高度。

$('.fullimg').height(wh); jQuery语法，设置fullimg类的高度等于浏览器窗口高度。

最后调用fullimg()

5、此时打开后图像占用了整个屏幕，但浏览器缩放或增大时，图像不会跟随变化，而jQuery的resize方法则为浏览器缩放时的过程，故在resize中调用fullimg ()过程，使div高度等于浏览器高度。

$(window).resize  ( function() {  fullimg()  } );