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。
css代码添加背景图片:
1.背景颜色:background-color
语法:{background-color:数值}
注意:在html当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。
表格背影颜色:style="background-color:red"
2.背景图片:background-image
语法:{background-image: url(url)|none}
3.背景重复:background-repeat
语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用:背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。
说明:参数取值范围:
·inherit 继承
·no-repeat 不重复平铺背景图片
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺
注意:如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4.背景固定:background-attachment
语法:{background-attachment:fixed|scroll}
·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动
·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
注意:背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。
5.背景定位:background-position
语法:{background-position:数值|top|bottom|left|right|center}
作用:背景定位用于控制背景图片在网页中显示的位置。
·带长度单位的数字参数
·top:相对前景对象顶对齐
·right:相对前景对象右对齐
·center:相对前景对象中心对齐
·比例关系
关键字解释如下:
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
注意:参数中的center如果用于另外一个参数的前面,表示水平居中;如果用于另外一个参数的后面,表示垂直居中。
6. 背景样式:background
语法:{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
作用:背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明。
扩展资料:
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。
参考资料来源:百度百科:css