Question

我当前的主页有背景图片（多色铅笔）http://www.makeminepop.com

我的目标是将相同的背景放在我的联系页面http://www.makeminepop.com/contact

的相应位置

生成的联系页面应该与模拟https://dl.dropboxusercontent.com/u/20040939/contact.png

类似

我做过尝试，但从我看到的情况来看，这两页的结构略有不同，使其变得棘手。

主页有一个特色div（#featured）。联系页面没有。这个特色div实际上有背景图像。

简单地将背景图像添加到联系人页面的内容div（.page-wrap.container）不起作用，因为它会导致拉伸背景占据div的整个高度。

任何帮助实现我想要的结果，最小的结构页面更改和最大的浏览器兼容性是值得赞赏的。

更新：我被要求提供代码;每个页面都有超过750行HTML，因此无法粘贴代码。我试图粘贴我认为是显着的部分。然而，这有点打败了目的。我来到专家那里指导可能出现的重点。很有可能我错过了一些相关的东西。

<!-- 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

希望您的联系页面有一些唯一的ID，在这种情况下直接使用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 个答案: