css如何使div背景图片填充

Question

如题所述

Answer 1

css使div背景图片填充的具体操作步骤如下：

1、我们首先打开前端开发工具，新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。

3、设置背景图片，创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

Answer 2

首先得看你需要的背景图片与DIV的尺寸是否一致，如果一致就可可以在CSS样式里面加个属性 background:url(图片路径/图片名) no-repeat;图片名的带上后缀，比如.jpg、.gif、.png等；也可以加成 background-image:url(图片路径/图片名) no-repeat;效果一样，起始也就是一回事，前面的是简写。
如果背景图的尺寸与DIV的尺寸不一样，那么就得考虑背景图是否需要铺满DIV，就得把no-repeat改为repeat，或者只在DIV的某一处显示，这样就得在no-repeat后面跟上位置参数，background:url(图片路径/图片名) no-repeat 距离左边的距离 距离上边的距离;只是使用的背景精灵技术。
具体你不明白的就Hi我；这个这样说页不是那么好理解的，实际把上面属性的文字换成你需要的值会更好理解，一点就明。
有问题Hi我。本回答被网友采纳

Answer 3

首先你需要保证背景图片的比例与 div 一致，然后再给 div 加上：background-size: cover; -moz-background-size: cover; 应该就可以了。本回答被提问者采纳

Answer 4

添加的div的width，height和图片的一样大小，然后在css里该div属性下设置background-image：url（images/图片名字.jpg）

比如；
图片尺寸大小：1.jpg 1000*300
HTML代码： <div class="container">随便乱写几个字</div>
CSS属性： .cotainer{
margin:0 auto; //居中展示
width:1000px;
height:300px;
background-image:url(1.jpg);
}