html怎么设置背景图片全屏平铺？

1、新建一个html文档。

2、设置一下HTML的框架，然后把图片设置在同一个文件夹里面。

3、加入，这样可以有样式设置。

4、因为背景设置在主体，所以还要定义为body{}。

5、background-image:url(图片)，这个是添加图片的意思。

6、然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。

7、background-repeat:no-repeat;这样就可以不重复平铺。

8、background-repeat:repeat-y;这个指令是纵向平铺。

9、background-repeat:repeat;这样则是全屏平铺。

推荐教程： 《HTML教程》

(注：一下内容是自己通过网络整理出来的，并非完全自己写的)

全屏背景是当下比较流行的一种网页设计风格，而具体的实现这样的全屏背景无外乎基本就两种方法，一种的通过CSS去实现的(CSS3.0为我们提供了更为丰富的CSS样式控制)；另一种就是通过我们熟悉的javascript去实现，这里为了代码方便就直接使用jQuery了。既然提到jQuery，我们就可以想象既然我们能用jQuery写了，那网络上就一定有类似的写好的jQuery插件等着我们用了。

方法一、利用CSS3.0样式新特性实现北京全屏(不支持ie6-8)

html {

background: url(images/bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

或：

html{

background:url('background.jpg') no-repeat center center;

min-height:100%;

background-size:cover;

}

body{

min-height:100%;

}

原理：将html及body设置为最小高度为100%，使用css3中的background-size:cover;将背景图片设置成封面全屏模式。

兼容性：

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+

Firefox 3.6+

方法二、使用jQuery实现

HTML代码：

CSS代码：

#bg { position: fixed; top: 0; left: 0; }

.bgwidth { width: 100%; }

.bgheight { height: 100%; }

jQuery代码：

$(window).load(function() {

var theWindow = $(window),

$bg = $("#bg"),

aspectRatio = $bg.width() / $bg.height();

function resizeBg() {

if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {

$bg

.removeClass()

.addClass('bgheight');

} else {

$bg

.removeClass()

.addClass('bgwidth');

}

}

theWindow.resize(resizeBg).trigger("resize");

});

兼容性：

IE7+

任何桌面浏览器

方法二、使用jQuery实现(附)【使用jQuery插件jQuery.fullBg】

具体使用方法在插件地址中有，这里就不做详细说明了。

First comes the plugin code:

/**

* jQuery.fullBg

* Version 1.0

* Copyright (c) 2010 c.bavota - http://bavotasan.com

* Dual licensed under MIT and GPL.

* Date: 02/23/2010

**/

(function($) {

$.fn.fullBg = function(){

var bgImg = $(this);

function resizeImg() {

var imgwidth = bgImg.width();

var imgheight = bgImg.height();

var winwidth = $(window).width();

var winheight = $(window).height();

var widthratio = winwidth / imgwidth;

var heightratio = winheight / imgheight;

var widthdiff = heightratio * imgwidth;

var heightdiff = widthratio * imgheight;

if(heightdiff>winheight) {

bgImg.css({

width: winwidth+'px',

height: heightdiff+'px'

});

} else {

bgImg.css({

width: widthdiff+'px',

height: winheight+'px'

});

}

}

resizeImg();

$(window).resize(function() {

resizeImg();

});

};

})(jQuery)

There is only a little CSS needed for this one:

.fullBg {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

}

#maincontent {

position: absolute;

top: 0;

left: 0;

z-index: 50;

}

If you want your background to stay fixed you can change the .fullBG CSS to this:

.fullBg {

position: fixed;

top: 0;

left: 0;

overflow: hidden;

}

For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. This is the bare minimum:

To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:

$(window).load(function() {

$("#background").fullBg();

});

Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

用什么代码实现？不允许有白色底色产生，因为手机高度不一样

错误的写法：加到div中结合图片设置min-height，但是页面不会回弹

话不多说直接上代码

终极方案

html,body{

width:100%;

height:100%

}

再加一段

body{

font-family: "华文细黑";

background:url("../img/Flyer-bg.png") no-repeat;

background-size: 100%;

}

就是这么简单，但是好多人想不到。

一个hack方案解决垂直剧中问题

.parent{

width:200px;

height: 200px;

/* 以下属性垂直居中 */

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

background-color: #aaa;

}

其他方案