CSS3 div background-image autoresize

我在這裏尋找很多帖子在stackoverflow，但沒有什麼，可以幫助我。也許這個問題是微不足道的，但我不知道該怎麼做，因爲我在這個初學者CSS3 div background-image autoresize

所以我有一些頭，其中是徽標，菜單和一些標題 - 這不是問題。在這個標題下，我有div類滑塊，在那裏我想要一些背景圖片，並且在這個背景圖片上我想要一些按鈕和標題以及另一個圖片。最後是我的問題。

如果我希望在桌面上顯示任何屏幕分辨率的全寬和自動高度（標題末尾到屏幕末端的高度）的此背景圖像，我該怎麼做？

我的意思是：如果我有分辨率1920x1080我想從頭到結尾的屏幕結束這個bg圖像。對於例如1366x768等等的分辨率，同樣的東西......我希望你能理解我的問題。在此 image

部首

實施例是紅色的。我想要bg-image（在這種情況下，圖像的白色部分，但我想有圖像）自動調整任何屏幕分辨率。

我真的很希望你明白我的問題，有人可以幫助我。

真的感謝任何答覆

http://jsfiddle.net/YKY4t/

我在代碼中的一些錯誤，所以請...

代碼：

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300,700); 

body { 
margin: 0; 
padding: 0; 
} 
.mainheader { 
width: 100%; 
height: 10%; 
background-color: #ff5959; 
position: absolute; 
} 
.mainheader img { 
max-width: 100%; 
height: auto; 
margin-left: 20%; 
margin-top: 1.5%; 
float: left; 
} 
.title { 
position: absolute; 
margin-top: 1%; 
margin-left: 22%; 
font-size: 35px; 
font-family: 'Quicksand', sans-serif; 
color: #ffffff; 
} 
.meta { 
position: absolute; 
margin-left: 18%; 
margin-top: 3%; 
font-size: 19px; 
font-family: 'Quicksand',sans-serif; 
font-weight: bold; 
color: #ffffff; 
} 
.nav { 
position: absolute; 
right: 20%; 
margin-top: 1%; 
font-size: 19px; 
font-family: 'Quicksand', sans-serif; 
font-weight: bold; 
} 
.nav li { 
list-style-type: none; 
float: left; 
} 
.nav li a { 
color: #ffffff; 
text-decoration: none; 
display: block; 
margin-left: 25%; 
} 
.slider img { 
background-image: url(../img/slider-image.png); 
background-repeat: no-repeat; 
background-position: center center fixed; 
background-size: cover; 
}

來源

2015-10-14 predik

對不同屏幕使用媒體查詢分辨率：@media all和（min-width：/ *最小分辨率顯示此背景* /）{/ *您的CSS代碼* /} – GmloMalo

正如我評論，你可以使用媒體查詢您可以使用不同分辨率圖像的不同屏幕尺寸。在這種情況下：

@media all and (min-width: 1920) { 
    .img-holder img{ 
     background-img: url(../img/slider-image.png); 
    } 
} 

@media all and (min-width: 1366) { 
    .img-holder img{ 
     background-img: url(../img/slider-image-medium.png); 
    } 
}

您可以使用它們來使用要覆蓋所有屏幕分辨率。你也可以使用任何響應式框架，如響應圖像的Bootstrap。

來源

2015-10-14 16:02:02 GmloMalo

CSS3 div background-image autoresize

回答

相關問題