html - 自动调整背景图像大小以适应较小的窗口和移动设备 - HTML/CSS

Question

虽然这个问题有很多答案，但我找不到适合我需要的答案。当我在移动设备上使用我的网站时，甚至在我的笔记本电脑上将我的浏览器窗口设置得非常小时，我会丢失我用作背景图像的完整图像。

HTML:

<div class="compete">
    <div class="container">
        <h2>Compete</h2>
        <p>Winners always win</p>
    </div>
</div>

CSS:

.compete{
  background-image:url('Handlebars.jpg');
  height:450px;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom:1px solid #ff6a00;
}
.compete .container {
  position:relative;
  top:40px;
}

关于如何继续使用我的背景图像并让它自动调整大小以便我可以在移动/小窗口上看到完整图像的任何想法？

Answer 1

尝试设置 background-size:100% 100%

CSS

.compete{
  background-image:url('http://dummyimage.com/600x400/000/fff');
height:450px;
background-repeat: no-repeat;
background-size: 100% 100%;
border-bottom:1px solid #ff6a00;
}
.compete .container {
position:relative;
top:40px;
}

HTML

<div class="compete">
<div class="container">
    <h2>Compete</h2>
    <p>Winners always win</p>
</div>

如果您仍然遇到任何问题，请回来。