Question

当用户使用浏览器放大时，我遇到网站标题正确显示的问题。横幅将在右侧切断并显示身体背景图像。该网站的地址是：http://www.bemidjisportsonline.com，有关解决此问题的方法的任何想法？谢谢。我将发布我的CSS下面的正文，标题和横幅元素。我在这里可以找到我正在谈论的屏幕截图：http://prntscr.com/19e59r。

body{
    font: 100%/1.25 Arial, Helvetica, sans-serif;
    /*background: url(/_images/background-repeated.png) top center repeat-x;*/
    background: url(/_images/background_jersey_green.jpg) #010101 top center repeat-x;
}

header, nav, section, article, aside, footer {display:block;}

header{
    width:100%;
    position: relative;
    background: url(/_images/header_trees.png) no-repeat;
    background-size: 100% auto;
    height: 7em;
}

#banner{
    z-index:100002;
    margin: 0 auto;
    width:75em;
    height:7em;
}

Answer 1

您需要更改background-size。像这样：

header {
  width: 100%;
  position: relative;
  background: url(/_images/header_trees.png) no-repeat;
  background-size: 100% 100%;
  height: 7em;
}

Answer 2

尝试将#banner宽度更改为100％。

#banner {
z-index: 100002;
margin: 0 auto;
width: 100%;
height: 7em;

}

使用浏览器缩放功能无法正确调整背景图像

2 个答案: