Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Backgrounds and Borders Advanced Backgrounds

Elena Paraschiv
Elena Paraschiv
9,938 Points

the background image does not cover the whole page

Hi guys,

the problems looks like this : Imgur

here is my code

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Elena Paraschiv</title>
    <link rel="stylesheet"  href="css/normalize.css">
    <!-- fonturile -->
    <link rel="stylesheet"  href="css/main.css">
    <script="js/picturefill.min.js" async></script>
</head>

<body>


<header>
    <div class="fixed">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>

        <a href="img/logo.png" class="logo" > 
           <img src="img/logo.png" >
        </a>
    </div>



</header>




<div class="group">
    <h2>About Me </h2>
<img class="photo" src="img/me.jpg"/>


<p class="description"> Hej. Numele meu este Elena. Visul meu este sa calatoresc in toata lumea si sa fac designuri minunate de websiteuri. sa traiesc alaturi de oameni frumosi si sa-mi fac viata minunata. va iubesc si va doresc o viata frumoasa! </p>
</div>



    <div class="wrapper">
       <div class="top">Top</div>
       <div class="middle">Middle</div>
       <div class="bottom">Bottom</div>
      <div class="bottom-rev1">elddiM</div>
      <div class="bottom-rev2">poT</div>
    </div>

<div class="balance">
</div>

<div class="shadow">
</div>


</body>

</html>
/*********************************************************
********************************************************/

body{
    background:black;
    font: normal 1.4em sans-serif;
    padding:0;
    margin:0;
    background-image:url("../img/hej.png");

}



/*********************************************************
Fixed navigation
********************************************************/
.fixed{
    position:fixed;
    width:100%;
    height:4em;
    background:#f2ede4;
    color:black;
    z-index:3;

}

nav{
    display:inline-block;
    color:#000;

}

nav ul{
    list-style:none;
    margin-top:1em;

}

nav ul li{
    display:inline-block;
    padding:20px;

}

/*********************************************************
logo
********************************************************/

.logo{
    display:inline-block;
    margin:0 0 0 25px;
    padding:0;
}

/*********************************************************/


/*********************************************************
Image with Text
********************************************************/
div{
    margin:0  auto;
    width:1000px;
    background:#2862d7;
    color:white;
    border-radius:10px;
}

h2{
    margin:50px 10px;
}

.photo{
    float:left;
    margin:0 25px 0 0;
    border-radius: 10px;
    padding:0 0 10px;

}


.description{
    margin:0 30px;
    width:700px;
    background:#23be85;
    color:white;
    float:left;
    padding:2em 2em;
    border-width:1em 1.2em;
    border-style:inset dashed outset;
    border-color:hsla(138, 100%, 50%, 1) hsla(45, 100%, 50%, 1) hsla(293, 100%, 87%, 1) hsla(349, 100%, 76%, 1) ;
;
    border-radius:0.5em;
    box-sizing:border-box;

}


.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}



/*********************************************************
Divs
********************************************************/
.wrapper{
    box-sizing:border-box;
    margin:50px auto;
    padding:50px;
    width:60%;
    background:hsla(78, 100%, 86%, 0.88);
    position:relative;
}

.wrapper div{
    width:150px;
    height:150px;
    text-align:center;
    line-height:150px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}

.top{
    background:#000;
    position:relative;
    left:300px;
}
.middle{
    background:#fff;
    color:#000;
    position:relative;
    left:150px;
}
.bottom{
    background:#000;
    position:relative;
    color:black;
}
.bottom-rev1{
    background:#fff;
    color:#000;
    position:relative;
    bottom:300px;
    right:150px;
}
.bottom-rev2{
    background:#000;
    position:relative;
    bottom:600px;
    right:300px;
}

.bottom-rev2::after{
    width:50px;
    height:50px;
    position:absolute;
    content:"";
    background:#fff;
    top:50px;
    right:50px;
}
.bottom::after{
    width:50px;
    height:50px;
    position:absolute;
    content:"";
    background:#fff;
    top:50px;
    right:50px;

}

.top::after{
    width:50px;
    height:50px;
    position:absolute;
    content:"";
    background:#fff;
    top:50px;
    left:50px;
}




/*********************************************************
Background Images
********************************************************/
.balance{

    width:800px;
    height:500px;
    background-color:green;
    box-sizing:border-box;
    margin:0 auto;
    background-image:url("../img/hej.png");
    display:block;
}

/*********************************************************
Shadow
********************************************************/
.shadow{
    display:block;
    margin:-400px auto;
    width:400px;
    height:300px;
    background-image:url("../img/tree.png");
    box-shadow:inset 0 0 30px 20px hsla(86, 100%, 41%, 1),
                -10px 0 30px 20px hsla(203, 100%, 51%, 1);

}

body{
    height:100%;
    background:url("../img/iceland.jpeg") no-repeat center;
    background-size:cover;
    background-position: fixed;
    position:relative;

}

3 Answers

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi Elena,

this works for me, if is what you mean!

body{
    height:100%; /* you can delete this line, since the properties below automatically fits all the body of the page */
    background:url("../img/iceland.jpeg") no-repeat center center fixed;
    background-size:cover;
}

May be added these lines :

html{ height:100%; min-height:100%; } body{ min-height:100%; }

Elena Paraschiv
Elena Paraschiv
9,938 Points

yes. That works fine! Thanks again Giannmarco!

if want to repeat backround images in your web page try this :

write this to your css file for background element -- > background-repeat: repeat;

clear no-repeat options from there : background:url("../img/iceland.jpeg") no-repeat center;

Elena Paraschiv
Elena Paraschiv
9,938 Points

Hej Huluki Akin,

Thanks for your input. But I don't want it to repeat. I am just wondering why it does not strech to fill the whole content of the body, as per background-size : cover; should do that

By the way , why do you use two body selectors in your css file?

Elena Paraschiv
Elena Paraschiv
9,938 Points

Just to keep it saved. I should have commented the first one, but I know they overwrite each other