Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Backgrounds and Borders Advanced Backgrounds

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by 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
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;
}
akin
akin
Courses Plus Student 2,865 Points

May be added these lines :

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

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

yes. That works fine! Thanks again Giannmarco!

akin
PLUS
akin
Courses Plus Student 2,865 Points
akin
akin
Courses Plus Student 2,865 Points

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

akin
akin
Courses Plus Student 2,865 Points

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

Elena Paraschiv
Elena Paraschiv
9,938 Points
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