调整浏览器大小时左右 header 背景图像重叠

Question

调整浏览器大小，您会看到我的问题：当浏览器变小时，header 中的图像重叠。主要问题是我在雅虎商店编辑器（现在是 aabaco 小型企业）工作，无法访问 HTML 来更改它。我确实知道 header 的 id 是 #header (duh)，所以我目前正在使用它。该网站在用 RTML 编写的模板中工作，我不知道 how/am 不敢更改这些模板。请帮忙！

这是我的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

您可以使用 @media query 在较小的屏幕尺寸上应用特定样式来解决此问题。

由于您示例中的图像是背景图像，因此首先将此属性添加到 #header

#header {
    background-size: contain;    
}

然后，在文件末尾放置一个媒体查询，使header在小屏幕上变小

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

Answer 2

您可以使用媒体查询来修复它，我使用该查询删除了 "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;
} 
}

调整浏览器大小时左右 header 背景图像重叠

left and right header background images overlapping when browser is resized

css

background

image

header