css - 调整浏览器大小时左右标题背景图像重叠

Question

http://mooytees.net/ups-index.html

调整浏览器大小，您会看到我的问题:当浏览器变小时，标题中的图像重叠。主要问题是我在雅虎商店编辑器(现在是 aabaco 小型企业)工作，无法访问 HTML 来更改它。我确实知道 header 的 ID 是#header (duh)，所以我目前正在使用它。该网站在用 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;
}

Answer 1

您可以使用媒体查询来修复它，我使用该查询来删除“UPS”图像，但是您可以根据需要使用它。

参见 fiddle :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;
} 
}