Question

我有一个带背景图片的网站。我还有一个标题，完全适合页面顶部。我现在要做的是，我想在图片顶部的标题下添加两个<div>，但似乎不可能。我尝试了所有可能的定位方式，显示。此外，<div>的填充也不起作用 - 它会将背景图像向下推。 jsfiddle：jsfiddle.net/XqHAj

这是html代码：

<body>
<div id="wrap">    


    <header id="header">
        <h1>Portfolio</h1>
           <div id="menu">
             <ul class="nav">
                <a href="#" id="pull">&#x2630;</a>
                <li><a href="index.php?site=home">Home</a></li>
                <li><a href="index.php?site=about">About Me</a></li>
                <li><a href="index.php?site=works">Works</a></li>
                <li><a href="index.php?site=contact">Contact</a></li>
             </ul>
           </div>
    </header>

        <div class="container"> 

            <div class="left-container-box">
                Bacon ipsum dolor sit amet porchetta shoulder chuck t-bone kevin rump pork chop landjaeger bresaola shank. Tail ribeye corned beef meatball capicola ham hock, beef ribs tongue jerky swine tri-tip pork chop spare ribs bresaola porchetta. Salami ham ham hock fatback venison, bresaola pork belly pastrami tongue. Jowl pork loin corned beef, spare ribs meatball filet mignon drumstick beef ribs shankle landjaeger pastrami t-bone bresaola. Hamburger ball tip frankfurter pastrami leberkas andouille pork loin pig shoulder. Tail tenderloin t-bone kevin swine tri-tip strip steak boudin bacon pastrami. Frankfurter bacon ribeye, biltong salami pancetta tenderloin.
            </div>

            <div class="right-container-box">

            <div>

        </div>

<div id="wallpaper"><img src="pictures/wallpaper.jpg" width="100%" height="100%" alt="wallpaper">

</div>

</body>

这是css代码：

html
{
    height:100%;
    width:100%;
    margin: 0px;
    padding: 0px;
}
body
{   
    font-family: "Sanchez-Regular";
    color:#BBBBBB;
    height:100%;
    margin:0;
    padding:0;
}

#wallpaper
{
    position:relative;
}

#header{
    width:100%;
    height:6em;
    background-color:#100f0f;
    position:absolute;
    z-index:1000;
    -webkit-box-shadow: 1px 1px 0px #333232;
    -moz-box-shadow: 1px 1px 0px #333232;
    box-shadow: 1px 1px 0px #333232;
}

/*NAVIGATION BAR STYLING*/
li{
    display:inline;
    padding:3.2em;
    font-size:120%;
    list-style-type:none;
}
.nav{
    margin: 0 auto;
    text-align:center;
    list-style-type:none;
}

#menu a{

    list-style-type:none;
    text-decoration:none;
    color:#BBBBBB;
    -webkit-transition: all 0.5s;
}

#menu a:hover{
    color:#807a7a;
}

#pull{
    display:none;
}
#menu{

    margin:auto;  
}
/*NAVIGATION BAR STYLING ENDS*/

/*BODY STYLING*/

.container{

}

.left-container-box{

}

提前致谢！

Answer 1

首先在壁纸div中设置背景图像“pictures / wallpaper.jpg” 从中删除图片标记

在壁纸div中加入两个div

Answer 2

您需要确保在希望“在页脚后面”的div上设置否定z-index和position:absolute

EXAMPLE

.image {
    position:absolute;
    width:300px;
    z-index:-999;
    bottom:0px;    
}

在标题下方的图片顶部放置div

2 个答案: