尽管这个问题有很多答案，但我找不到适合我需求的答案。当我在移动设备上使用网站时，或者甚至使我的笔记本电脑上的浏览器窗口很小时，我都会丢失用作背景图像的完整图像。
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;
}
关于如何继续使用背景图像并对其进行自动调整的任何想法，以便可以在移动/小窗口上看到完整图像？
尝试设置背景大小：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>
如果仍然遇到任何问题，请回来。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句