Question

我对css和bootstrap很新，我已经搜索并尝试了w3c解决方案以及SO但是效果不佳。其实我想在我的主页上有一个图像作为背景。在我的内容中，如页面中间有3个小按钮/图标。

我试过这个

<div id="homepage">

</div>

的CSS：

#homepage{
    background: url(../images/homepage.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat
}

但它不起作用。

第二解决方案：我尝试的第二件事是包含一个img标签然后添加我的内容并通过绝对位置向中间拖动，我认为这不是一个好方法，因为响应性不会保留在那里。

任何人都可以在这方面帮助我。

Answer 1

假设您仔细检查了图像路径，我认为问题是div的大小。

尝试给你的div一个固定的宽度和高度，以便至少测试图像的显示方式。

<div id="homepage" style="width:500px;height:300px">
</div>

然后查看如何使用bootstrap grid system以使你的div尽可能大。

Answer 2

你可以试试这个：

#homepage{
    background: url(https://paulmason.name/media/demos/full-screen-background-image/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

http://jsfiddle.net/y558vo9a/

Answer 3

如果您希望背景图片位于索引页面中，则无需添加“../”，也无需添加background-size，-repeat即可实际设置代码;

 background: url(images/homepage.jpg) no-repeat 50% 50%;

但如果它适合你，你可以这样使用它。我也注意到，你忘了用';'

关闭背景重复

主页的背景图片

3 个答案: