css 背景图片怎么让他在浏览器中都居中显示?

html-css08

css 背景图片怎么让他在浏览器中都居中显示?,第1张

要是背景图片居中,需要借助于css中的background属性,background 简写属性其定义及用法如下:

background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:

1,background-color 规定要使用的背景颜色。

2,background-position 规定背景图像的位置。

3,background-size 规定背景图片的尺寸。

4,background-repeat 规定如何重复背景图像。

5,background-origin 规定背景图片的定位区域。

6,background-clip 规定背景的绘制区域。

7,background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。

background-image 规定要使用的背景图像。

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif')也是允许的。

通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

background-position 即是规定背景图片的位置。它的值分别有以下:

top,left,right,bottom

所以需要想背景图片居中显示的话,可以这样写:

#menu_bg{background:url(../images/index_x.jpg) center center}

css使整个页面背景图片居中,你是可以给一个总的div设置好一定的width和height,然后给它来设置背景图片,在通过margin让他们居中,同时,background的repeat来平铺实现,具体代码:

<html>

<head>

<style>

#div1{

width:960px

height:1200px

border:1px soild #f00

background:url('图片地址')repeat 0px 0px

margin:0 auto

}

</style>

</head>

<body>

<div id='div1'>

</div>

</body>

</html>

方法和详细的操作步骤如下:

1、第一步,打开前端开发工具,然后创建一个新的html代码页,见下图,转到下面的步骤。

2、第二步,执行完上面的操作之后,创建一个div标签以设置html代码页的背景色,然后将class

 =“ bg-img”添加到标签中,见下图,转到下面的步骤。

3、第三步,执行完上面的操作之后,设置背景图片,创建一个样式标签,然后设置背景图像、该图像不重复以及标签中bg-img的类的宽度和高度,见下图,转到下面的步骤。

4、第四步,执行完上面的操作之后,保存html代码,然后使用浏览器打开,浏览器上的背景图像将显示在左上角,见下图,转到下面的步骤。

5、第五步,执行完上面的操作之后,返回html代码页,在bg-img类中添加background-position:center属性,见下图,转到下面的步骤。

6、第六步,执行完上面的操作之后,保存html代码并刷新浏览器,会发现浏览器上的背景图像已自动水平居中,见下图。这样,就解决了这个问题了。