2015-08-29 214 views
1

晚上好, 我正在網站上使用「單頁佈局」。而且我對移動響應性有很大的問題。特別是在菜單和背景圖片部分。我會發布我的代碼,請給我一些建議,編輯什麼? 非常感謝!如何設置背景圖像響應

HTML:

<div id="menu"> 
<div id="content"> 
<div id="logo"> 
<a href="#uvod"><img src="style/img/logo.png" border="0"></a> 
</div> 
<div id="nabidka"> 
<ul> 
    <li href="about"><a href='#about'>O nás</a></li> 
    <li href="cenik"><a href='#cenik'>Ceník</a></li> 
    <li href="sluzby"><a href='#sluzby'>Služby</a></li> 
    <li href="kontakt"><a href='#kontakt'>Kontakt</a></li> 
</ul> 
</div> 
<div id="socsite"> 
<table style="width: 210px; height: 80px;" border="0"> 
<tr><td width="70"><a class="fb" href=""></a> </td> 
<td width="70"><a class="twitter" href=""></a> </td> 
<td width="70"><a class="youtube" href=""></a>  </td></tr> 
</table> 

</div> 
</div> 
</div> 

<div id="uvod" class="section"> 
<div id="content"> 
...text text text... 
    </div> 
</div> 

和CSS:

#uvod { 
background:url('img/bg-uvod.png') top no-repeat fixed; 
float:left; 
width: 100%; 
min-height: 100%; 
z-index: 1; 
} 

#menu { 
background-color: #535353; 
width: 100%; 
height: 90px; 
    padding: 0; 
    margin: 0 auto; 
    position: fixed; 
top: 0; 
z-index: 100; 
} 

#logo { 

width: 200px; 
height: 90px; 
margin-left: 1em; 
    padding-top: 5px; 
    float: left; 
} 
#nabidka { 

width:550px; 
height: 90px; 

margin-left: 1.5em; 
    padding-top: 5px; 
float:left; 

} 
#socsite { 

width:240px; 
height: 90px; 
    padding-top: 5px; 
    margin-left: 7em; 
    float: left; 

} 

#content { 
width: 1200px; 
margin: 0 auto; 
} 

回答

3
#uvod 
{ 
    background: url('img/bg-uvod.png') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

爲什麼不試試封面?如果這不起作用,請嘗試在背景中放置絕對位置div,然後設置背景。

+1

謝謝,它確實有幫助,但僅限於身高。當我在手機上打開它時,我使用背景圖片的部分沒有100%的寬度。菜單有1200px,也有白色背景的部分,但圖像背景有75%的寬度...第二個問題,當我縮小菜單pannel,按鈕下來,在灰色的面板菜單和社交網絡的圖標...什麼我應該這樣做嗎?我把它固定,我給它固定寬度(1200px)... –

+0

我建議在你的內容的背景中放置一個位置:絕對div並使其成爲你需要的大小。然後將上述背景應用到這個新的背景div。 – Kelsey

0

你將不得不使用規則:

background-size: cover;

添加到您的#uvod

這將覆蓋整個屏幕的寬度,當屏幕縮小時,屏幕會隨之縮小。

0

查看background-size屬性。具體來說,就是containcover的值。

看一看上MDN文檔的詳細: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

這是一個很好的閱讀,以及: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

另外,一定要看看瀏覽器的兼容性表在底部第一個鏈接,並確保它涵蓋您正在尋找的瀏覽器。

如果你只是針對現代瀏覽器,我可能還建議考慮使用SVG作爲你的背景圖片,因爲它們在任何尺寸上都很好看。