左，右頭背景圖片瀏覽器時，在調整大小

http://mooytees.net/ups-index.html 左，右頭背景圖片瀏覽器時，在調整大小

調整瀏覽器，你會看到我的問題重疊：圖像在頭重疊時，瀏覽器變得更小。主要問題是我在雅虎商店編輯（現在aabaco小企業）工作，並且無法訪問HTML來更改它。我知道標題的ID是#header（杜），所以我正在與目前的工作。該網站在使用RTML編寫的模板中工作，我不知道如何/很害怕改變這些模板。請幫忙！

這是我的CSS。我知道這很難，沒有HTML，但沒有任何我能做的事（至少，我不認爲有）。

#header{ 
 
background-color: #351e16; 
 
background-image: url(http://site.mooytees.net/ups-header-left.png), url(http://site.mooytees.net/ups-header-right.png); 
 
background-position: left top, right top; 
 
background-repeat: no-repeat; 
 
min-width: 25%; 
 

 
} 
 

 
h3{ 
 
opacity:0; 
 
height: 175px; 
 
} 
 

 
#header .searcharea{ 
 
display: none; 
 
}

來源

2016-01-22 speakygreeky

，是你想要的結果的例子嗎？較小的圖像？隱藏圖像？讓他們在彼此之下？ –

您可以通過使用媒體查詢來修復它，我使用查詢來刪除「UPS」圖像，但是您可以根據需要使用它。

見琴：https://jsfiddle.net/DIRTY_SMITH/4svoebdm/

編輯這裏爲與變更大小https://jsfiddle.net/DIRTY_SMITH/4svoebdm/1/

@media (max-width: 800px){ 
#header { 
    background-image: url(http://site.mooytees.net/ups-header-right.png); 
    background-position: left top; 
} 
}

來源

2016-01-22 19:19:57

是的！非常感謝！我不知道爲什麼我沒有想到這一點。再次感謝您的幫助和快速響應！乾杯。 – speakygreeky

您可以使用@media query到一個較小的屏幕尺寸應用特定的樣式解決這個問題。

由於您的示例圖像是背景圖像，首先這個屬性添加到#header

#header { 
    background-size: contain;  
}

然後，將你的文件的最後一個媒體查詢，以在小屏幕上的標題更小

@media (max-width: 800px) { 
    #header { 
     height: 100px !important; 
    } 
}

來源

2016-01-22 19:15:40

左，右頭背景圖片瀏覽器時，在調整大小

回答

相關問題