如何使用瀏覽器大小製作響應的背景圖像

Question

我在這裏找到了兩個很好的示例，http://mattfarley.ca/#和https://popper.js.org/。

背景圖片僅適用於他們的第一部分，但它對任何瀏覽器大小的拖動都有反應。我怎樣才能做到這一點？

我的想法是使用Jquery獲取當前大小，然後設置爲背景部分？

在此先感謝！

Answer 1

body { 
    background-image: url(defaultBackground.png); 
} 

@media all and (max-width: 767px) { 
    body { 
     background-image: url(smartphoneBackground.png); 
    } 
} 

首先在你的css文件中設置一個默認背景圖像。之後，通過媒體查詢設置智能手機的背景。

Answer 2

添加這些CSS並且不添加圖片邊距，高度和寬度。希望它的作品

background-image: url(image_url_here); 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center;