我想使页面缩放或移动兼容我认为是术语。我的网页现在的问题是它看起来不错，但是当我拖动浏览器时，我的页面的背景图片覆盖了“服务”标题<section>部分。拖动浏览器导致背景图像重叠下一节

这里是jsFiddle：http://jsfiddle.net/eg18dfy0/4/不知道这将是多么有用，因为本地文件不包括在这里。

正常： enter image description here

Dragging功能：

enter image description here

这里是我的代码：

HTML代码段的事项：

<header> 
    <div class="background_image"> 
    </div> 
    <div class="welcome-text-container"> 
    <div class="row"> 
     <div class="welcome-text1">Welcome!</div> 
     <div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div> 
     <div class="btn-row"> 
     <a href="#services" class="welcome-btn btn-lg">TELL ME MORE</a> 
     </div> 
    </div> 
    </div> 
</header> 

<!-- services --> 
<section id="services"> 
    <div class="container"> 
    <div class="service-title">Services</div> 
    <div class="service-caption">What we'll do for you</div> 
    </div> 
</section>

CSS：

.background_image { 
    background-image: image-url("header-bg.jpg"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 0; 
    padding-top: 66.64%; 
    position: absolute; 
    /* (img-height/img-width * width) */ 
    /* (853/1280 * 100) */ 
} 

/* Services */ 

#services { 
    padding-top: 110px; 
    margin-top: 75px; 
} 

.service-title { 
    text-align: center; 
    font-size: 55px; 
    font-weight: 700; 
} 

.service-caption { 
    text-align: center; 
    font-size: 20px; 
}

来源

2014-11-17 Liondancer

您可以使用小提琴左侧的“外部资源”选项卡包含外部资源。如果它不能重现问题，那么创建小提琴就没有意义。 –

或更改'image-url（“header-bg.jpg”）'到你服务器上的文件的url – artm

这样做^^^^^^^^ – Timothy

这应该解决您的问题：

Fiddle illustrating fix

你设置的背景图像这是基于文档的流动越来越高堆叠优先级的DIV，所以它重叠你的后续divs。

这是我加入到解决问题的CSS：

.container > div.background-image { 
    z-index: 1; 
} 

.container > div { 
    position: relative; 
    z-index: 2; 
}

有更好的方法来做到这一点（即不创建一个背景图像的单独的div），但是这将解决您的问题没有大的变化记录结构。

对于占位符图像来说，所有功劳归于http://placehold.it。如果你打算在StackOverflow上解决CSS问题，那么这是一个挽救生命的方法。

来源

2014-11-17 02:26:54

谢谢你的帮助，但我解决了这个问题，在我的CSS中删除了background_image，并添加了这个位[header-header-image：image-url（“header-bg.jpg”）; \t background-size：cover; \t background-position：center center; }' – Liondancer

这是解决这个问题的另一种方式，但不要在该区域放置任何可点击的元素，然后您的原始'background-image' div会与它们重叠。 –

拖动浏览器导致背景图像重叠下一节

回答

Fiddle illustrating fix

相关问题