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

Posted by Cristiano Porto
Cristiano Porto
5,850 Points

Background-image won't fully show

Guys, I have been trying to figure out why the heck my background image won't fully show its height. I already specified the html and div's height to 100% and did all I could. but yet it doesn't seem to work.

HERE IS MY HTML / CSS CODE ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title></title> </head> <body> <header> <h1> The Road To Inner Peace </h1> </header> <nav> </nav> <div class="website-layout"> <section> <h2>Where it all begins</h2> <p>It starts with a search, with a desire! Longing for something more than just the life we all live. The road less traveled, the hidden trail. </p> </section> </div> </body> </html>

'''

''' html { width: 100%; height: 100%; background-image: linear-gradient(to top,rgba(9, 9, 9, .8),rgba(9,9,9, .3)); border: 1px solid black; }

header { text-align: center; }

.website-layout { margin: 0 auto; width: 70%; height: 100%; background-color: red; background: url('http://d177s889mq500p.cloudfront.net/wp-content/uploads/2016/07/webdevelopment-bg.jpg'); background-size: cover; border: 10px solid black; }

'''

1 Answer

Tray Denney
PLUS
Tray Denney
Courses Plus Student 12,884 Points
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

When you set an element to a percentage size, it is relative to the parent of the element. Here you are setting the width and height of your div to a percentage 

.website-layout { 
  width: 70%; 
  height: 100%;
}

but that div doesn't know what to base those percentages on.

To fix this you can either add a container parent div and give it a fixed size or you can give the body element a size like so:

body {
 height: 100%;
}

The body element is relative to the html element and so now you can size your div relative to the body like so (for best result):

.website-layout { 
  width: 70%; 
  height: 70%;
}

Now your .website-layout div will be centered and the image should fit correctly inside of it. You can always play around with the percentages and background-image properties if you want a different look. Hope this helps.