html5怎么设置整页背景图片

html-css013

html5怎么设置整页背景图片,第1张

html5中设置整页背景图片的方法是利用css3样式:

写法如下:

img.bg {

 /* Set rules to fill background */

 min-height: 100%

 min-width: 1024px

 /* Set up proportionate scaling */

 width: 100%

 height: auto

 /* Set up positioning */

 position: fixed

 top: 0

 left: 0

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */

 img.bg {

   left: 50%

   margin-left: -512px  /* 50% */

 }

}

效果如:

背景图片不重复不平铺,可以这样设定背景:

1、<body style="background-image: url("图片文件地址")background-attachment: fixed">

这样背景图片就会固定住,不会因页面滚动而重复。

2、使图在任何大小的屏幕都不会显示重复,可以这样设定背景(图像不平铺):

<body style="background-image: url("图片文件地址")background-repeat:no-repeat">

3、两者结合,就是:<body style="background-image: url("图片文件地址")background-repeat:no-repeatbackground-attachment: fixed">

扩展资料

超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。

可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。

平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

参考资料 百度百科 HTML

1、设置背景图片只需在css样式中设置backgroud-image属性:

<style type="text/css" >

body{

background-image:url(你的图片地址)

background-position:center       

background-repeat:repeat-y;

}

</style>

2、其中, background-image:url(你的图片地址)表示背景图片的存放路径;

background-position:表示的是背景图片的位置,主要有top(上)、bottom(下)、left(左)、right(右)这四个取值;

background-repeat:表示的图片的平铺方式。默认情况是平铺,一般设置为no-repeat,表示的是不平铺。

背景颜色属性(background-color):

这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。

body {background-color:#99FF00}:

上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。

演示示例

背景图片属性(background-image):

这个属性为HTML元素设定背景图片,相当于HTML中background属性。

<body style="background-image:url(../images/css_tutorials/background.jpg)">

上面的代码为Body这个HTML元素设定了一个背景图片。

演示示例

背景重复属性(background-repeat):

这个属性和background-image属性连在一起使用,决定背景图片是否重复。如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。

repeat-x 背景图片横向重复;

repeat-y 背景图片竖向重复;

no-repeat 背景图片不重复;

body {background-image:url(../images/css_tutorials/background.jpg)background-repeat:repeat-y}

上面的代码表示图片竖向重复。

演示示例

背景附着属性(background-attachment):

这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。

body {background-image:url(../images/css_tutorials/background.jpg)background-repeat:no-repeatbackground-attachment:fixed}

上面的代码表示图片固定不动,不随内容滚动而动。

演示示例

背景位置属性(background-position):

这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。

body {background-image:url(../images/css_tutorials/background.jpg)background-repeat:no-repeatbackground-position:20px 60px}

上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。

演示示例

背景属性(background):

这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}

上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。