如何放置不拉伸div高度的背景图像？

Question

My current home page has a background image (multi-colored pencils) http://www.makeminepop.com我现在的主页有背景图片（彩色铅笔） http://www.makeminepop.com

My goal is to place the same background in the corresponding place of my contact page http://www.makeminepop.com/contact我的目标是在我的联系页面对应的位置放置相同的背景http://www.makeminepop.com/contact

The resulting contact page should like like the mock-up https://dl.dropboxusercontent.com/u/20040939/contact.png生成的联系页面应该像样机https://dl.dropboxusercontent.com/u/20040939/contact.png

I've made an attempt, but from what I see, the two pages structure are slightly different, making it tricky.我已经尝试过，但从我所见，这两个页面结构略有不同，因此很棘手。

The home page has a featured div (#featured).主页有一个特色 div (#featured)。 The contact page does not.联系页面没有。 It's this featured div that actually has the background image.正是这个特色 div 实际上具有背景图像。

Simply adding the background image to the content div (.page-wrap.container) of the contact page does not work because it results in a stretched background taking up the entire height on the div.简单地将背景图像添加到联系页面的内容 div (.page-wrap.container) 是行不通的，因为它会导致拉伸的背景占据 div 的整个高度。

Any help achieving my desired result with minimal structural page change and maximum browser compatibility is appreciated.感谢任何帮助以最小的结构页面更改和最大的浏览器兼容性来实现我想要的结果。

UPDATE : I was asked to provide code;更新：我被要求提供代码； each page is over 750 lines of HTML, so it's not possible to paste the code.每个页面都超过 750 行 HTML，因此无法粘贴代码。 I have attempted to paste what I think are the salient parts.我试图粘贴我认为最重要的部分。 However, that kinda defeats the purpose.然而，这有点违背了目的。 I came to the experts for guidance on what likely the salient points are.我向专家寻求有关可能的要点的指导。 It's highly probable I missed something pertinent.我很可能错过了一些相关的东西。

<!-- HTML for home -->
<body class="home">
<header id="main-header">
    <div class="container">
</header>
<div id="featured">
    <div class="container"></div>
</div>
<div class="page-wrap container">
    <div id="main-content"></div>
    <footer id="main-footer"></footer>
    <div id="footer-bottom"></div>
</div>
<div id="footer-info" class="container">
    <p id="copyright">© 2015 makeminepop, All Rights Reserved.</p>
</div>
</body>

<!-- HTML for contact -->
<body class="page-template-page-contact">
    <header id="main-header">
        <div class="container">
    </header>
    <div class="page-wrap container">
        <div id="main-content"></div>
        <footer id="main-footer"></footer>
        <div id="footer-bottom"></div>
    </div>
    <div id="footer-info" class="container">
        <p id="copyright">© 2015 makeminepop, All Rights Reserved.</p>
    </div>
</body>

   //css
    #featured {
    background-image: url("http://www.makeminepop.com/wp-content/uploads/2015/09/pencils-452238_1280.jpg");
}
#featured, .post-thumbnail {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
#featured {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) inset;
    margin-top: -1px;
}

Answer 1

Hope there is some unique id to your contact page, in that case work with before pseudo selector for body directly.希望您的联系页面有一些唯一的 id，在这种情况下，直接使用 before 伪选择器作为正文。 Code below, hope this helps.下面的代码，希望这有帮助。

Or you can also use this concept with the .page-wrap accordingly instead of for body.或者您也可以相应地将此概念与 .page-wrap 一起使用，而不是用于 body。

body.contact-page:before {
    background-image: url("http://www.makeminepop.com/wp-content/uploads/2015/09/pencils-452238_1280.jpg");
    background-size: cover;
    content: "";
    height: 300px;
    position: absolute;
    top: 160px;
    width: 100%;
    z-index: -1;
}

如何放置不拉伸div高度的背景图像？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-09-23 04:39:46

如何放置不拉伸div高度的背景图像？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-09-23 04:39:46

解决方案1
0 已采纳 2015-09-23 04:39:46