自動調整大小的背景圖像，以適應較小的窗口和移動設備 - 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; 
} 

有關如何使用我的backgrond圖像保持，但有它的任何想法自動調整大小，所以我可以看到在移動完整的圖像/小窗戶？

Answer 1

嘗試設置背景尺寸：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> 

待辦事項回來，如果你仍然面臨的任何問題。