html整个页面添加背景图片(html添加背景图片代码)
大家好,关于html整个页面添加背景图片很多朋友都还不太明白,今天小编就来为大家分享关于html添加背景图片代码的知识,希望对各位有所帮助!
html 怎么让背景图铺满整个页面
下面这段代码给div设置了一个宽度和高度,然后添加了一张背景图片,并使用了background-size:cover;这个属性,就会自动放大或缩小背景图片来适应,但是需要指出的是这个属性在需要在IE9及以上版本支持,谷歌和火狐都支持,具体支持情况看上面的图,浅绿的代表支持,粉红的不支持,你也可以到caniuse.com自己查看支持性
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;"charset="utf-8">
<title>无标题文档</title>
</head>
<styletype="text/css">
.div1{width:500px;height:600px;background:url(images/class_nav.jpg);background-size:cover;}
</style>
<body>
<DIVclass="div1"></div>
</body>
</html>
html 如何让背景图片充满全图,就是拉伸
html语言背景图片拉伸代码:background-size:cover,可以使图片拉伸铺满背景。
拓展资料
背景(background)属性定义元素的背景效果
元素的背景区包括前景之下直到边框边界的所有空间。因此,内容框与内边距都是元素背景的一部分,且边框画在背景上。
CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果;CSS在这方面的能力远远在 HTML之上。
background是用于在一个声明中设置所有背景属性的一个简写属性。
格式: background:{属性值}
继承性: NO
可能的值:
background-color
background-image
background-repeat
background-attachment
background-position
新增的值:
background-clip
background-origin
background-size
注:可以在此声明中声明1到5个背景属性。
这只是 CSS 1.0的属性,在CSS 2.0 background已经退出了历史舞台。
例:
<style type="text/css">
body
{
background:#ff0000 url('i/eg_bg_03.gif') no-repeat fixed center;
}
</style>
HTML中如何添加背景图片
<><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>无标题文档</title>
</head>
<style>
#pic{
height:200px;
width:200px;
background-image:url(images/ad1.png);
background-position:center;
background-repeat:no-repeat;
}
</style>
<body>
<div id="pic">这里填写文字<div>
</body>
</html>
设置图片的地址请在url括号中设置:
background-image:url(images/ad1.png);
设置图片的位置,这里是局中设置,当然您可以right和left设置:
background-position:center;
背景图片是否重复填充HTML标签,这里设置的是只显示一次
background-repeat:no-repeat;
至于height和width的设置,这个是您所说的HTML元素的高度和宽度,可以根据背景图片的高度和宽度进行设置
如果您有任何问题都可以在下面的网站中留言,只要力所能及,我一定为您解答
关于html整个页面添加背景图片的内容到此结束,希望对大家有所帮助。