All divs go behind background-image (.main). How can I fix it?

Question

All divs go behind background-image (.main), not after it. How can I fix it?

HTML

<!DOCTYPE html>
    <head>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/png">
        <meta charset="utf-8">
        <title>Digital Geeks | Ищем клиентов в сети</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/base.css">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>

    <body>

        <div class="main">
            <div class="header">
               <h2 class="logo">DigitalGeeks</h2>
                <ul class="header_list">
                    <li><a href="about.html">О нас</a></li>
                    <li><a href="services.html">Услуги</a></li>
                    <li><a href="projects.html">Кейсы</a></li>
                    <li><a href="blog.html">Секреты</a></li>
                    <li><a href="contacts.html">Контакты</a></li>
                </ul> 
            </div>
            <div class="title">
                <h1>Мы знаем, где прячутся ваши клиенты</h1>
            </div>
             <a href="#" class="action-button shadow animate blue">Хочу клиентов</a>
            </div>

        <div class="services">
            <ul id="box">
                <li class="box1">Разработка сайтов</li>
                <li class="box2">Контекстная реклама</li>
                <li class="box3">СММ и привлечение клиентов из соц сетей</li>
                <li class="box4">Email маркетинг</li>
            </ul>
        </div>

        <div class="partners">
            <h1>Нам доверяют</h1>
            <ul id="box">
                <li class="box2">Papa John's Москва</li>
                <li class="box1">ПБЦ ЦСКА</li>
                <li class="box3">Hooters</li>
                <li class="box4">Papa John's Тверь</li>
            </ul>
        </div>

        <div class="footer">

        </div>

    </body>
</html>

CSS

/************************************************************************ FONTS
***********************************************************************/
@font-face {
    font-family: agoranormal;
    src: url(../fonts/AgoraSansProRegular.ttf)
}

@font-face {
    font-family: agorabold;
    src: url(../fonts/AgoraSansProBold.ttf);
}

@font-face {
    font-family: agorathin;
    src: url(../fonts/AgoraSansProXThin.ttf);
}

h1 {
    font-family: agorathin;
    font-size: 5.2em;
    color: fff;
}

h2 {
    font-family: agorathin;
    font-size: 3em;
    color: fff;
}

a {
    text-decoration: none;
    color: fff;
}



/************************************************************************ HEADER
***********************************************************************/
.logo {
    float: left;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 3%;
    margin-left: 8%;
}

.header_list {
    float: right;
    margin-top: 4%;
    padding: 0.5%;
    width: 50%;
}

.header_list li {
    list-style: none;
    padding-right: 8%;
}

.header_list li:hover {
    color: #2980B9;
}

.header_list li a {
    text-decoration: none;
    color: white;
    font-family: agorathin;
    font-size: 1.8em;
}

.logo,
.header_list,
.header_list li {
    display: inline-block; 
}



/************************************************************************ MAIN SLIDE
***********************************************************************/
.main {
    height: auto;
    width: 100%;
    position: fixed;
    min-height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.35) 100%), url(../images/mainbg.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    color: white;
    text-align: center;
}

.title {
    margin: 0 auto;
    content: "";
    display: table;
    clear: both;
    margin-top: 21%;
}


.action-button {
    content: "";
    display: table;
    clear: both;
    position: relative;
    padding: 20px 45px;
    margin: 0 auto;
    border-radius: 10px;
    font-family: agorathin;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;  
    margin-top: 5%;
}

.blue {
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;
    text-shadow: 0px -2px #2980B9;
}

.action-button:hover {
    background-color: #2980B9;
}



/************************************************************************ SERVICES
***********************************************************************/
.services {
    content: "";
    display: table;
    clear: both;
}

.box {
    list-style: none;
}

.box1 {

}

Answer 1 · 2015-11-11T20:19:42Z

November 11, 2015 8:19pm

Try taking out "position:fixed" in your .main class.

Answer 2 · 2015-11-11T20:24:46Z

November 11, 2015 8:24pm

Hi, I think you may not want to have: position: fixed for your div.main since it will remove that div from the dom's normal flow.

woops nicholas beat me to it

Answer 3 · 2015-11-12T03:19:21Z

November 12, 2015 3:19am

I'm not sure if this is what you're aiming for, but I tried to come up with this page: https://jsfiddle.net/ek1edqyb/1/embedded/result/

From where I see, your background height isn't getting 2 times smaller by checking the height of .main selector/container with "inspect element" on browser. It seems .main would look like 2 times smaller and background-setting of .main selector isn't covering the entire page because the div with .main class isn't containing other div elements such as div with .service, if this is what this problem concerns about.

Welcome to the Treehouse Community

Looking to learn something new?

Denis Zhidkov

Denis Zhidkov

All divs go behind background-image (.main). How can I fix it?

3 Answers

Nicholas Olsen

Nicholas Olsen

Denis Zhidkov

Denis Zhidkov

david carter

david carter

Denis Zhidkov

Denis Zhidkov

yuehwencheng

yuehwencheng