主页的背景图片答案

【问题标题】：background image for homepage主页的背景图片
【发布时间】：2017-11-01 23:39:29
【问题描述】：

我对 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 标签，然后添加我的内容并按绝对位置拖动到中间，我认为这不是一个好方法，因为响应性没有保留在那里。

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

【问题讨论】：

标签： css

【解决方案1】：

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

尝试为您的 div 设置固定的宽度和高度，以测试图像是否至少以这种方式显示。

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

然后查看如何使用引导程序 grid system 来使您的 div 尽可能大。

【讨论】：

不能自动覆盖整个页面吗？
这里有人问过类似的问题：stackoverflow.com/questions/7568931/… 看看它可能会帮助您解决问题。

【解决方案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/

【讨论】：

两次背景尺寸？
它工作正常，但有什么解决方案可以根据图像自动拉伸它吗？
这是可能的，但您的背景图片不会响应不同的屏幕尺寸。

【解决方案3】：

如果您希望背景图片出现在您的索引页面中，则无需添加“../”，也无需添加 background-size, -repeat 当您可以实际设置代码时；

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

但如果它适合你，你可以这样使用它。而且我还注意到，您忘记用 ';'

关闭背景重复

【讨论】：