Question

我一直试图解决这个问题。尝试使用css添加背景图像。我也在使用bootstrap。这是我的代码

的CSS：

.container-fluid{
background-image: url('../DomPic/photo1.jpg');
height: 100%;
width: 100%;
}

HTML：

<div class="container-fluid"></div>

问题： 图片不会显示在我的页面上。

Answer 1

这是因为你的div什么都没有。

<div class="container-fluid">Something</div>

在div中添加一些内容。

或

给出固定的宽度和高度。或至少固定height有效。

.container-fluid{
background-image: url('../DomPic/photo1.jpg');
height: 100px;
width: 100px;
}

Answer 2

.container-fluid{
position:absolute;
background-image: url('DomPic/photo1.jpg');
height: 100%;
width: 100%;
}

增加位置：绝对;现有代码

Answer 3

将position:absolute;添加到.container-fluid课程.. 它很简单..

注意：在div中添加内容会使背景符合div的内容。

Answer 4

试试这个：

 .container-fluid{
background-image: url('http://s13.postimg.org/51s3l0x3b/w3schools.png');
background-repeat: repeat-y;
height: 100%;
width: 100%;
}

DEMO HERE

Answer 5

您的图片显示路径错误。

你不需要将路径设置为C：.... 只是

background-image: url('just ../assets/img.piture.png or ./picture.png or picture.png'); 取决于图片在项目中的位置。离。

myproject / assets / images / picture.png ..等等。

以下示例有效。

.container-fluid{
background-image: url('http://www.fillmurray.com/100/100');
height: 100px;
width: 100px;
}

  <div class="container-fluid"></div>

Answer 6

尽量使用你的风格可能会帮到你

.container-fluid
    {
    position:absolute;
    background-image: url('DomPic/photo1.jpg');
    height: 100%;
    width: 100%;
    background-size:contain;
    }

Answer 7

而不是Image的错误方式。请再次检查。

{{ b.teams|first }}

HTML，CSS使用背景图片

7 个答案: