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 Ryne Smith
Ryne Smith
Courses Plus Student 2,318 Points

My background image's top is cut off

I am still fairly new to web development and I just created a placeholder page with an image put using CSS. The html is just code that has an empty body so it is a blank page. The CSS page has the following code:

body {
    background-image: url("placeholder.png");
    background-repeat: no repeat;
    background-position: center;
}

Unfortunately it seems that although the image is centered and not repeating, the top half of the image is cut-off and only the bottom half appears flush with the top of the browser.

I would be thankful for any insights that people can offer. Thanks!

5 Answers

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

Hi Ryne,

You've added your image to the body selector.

How tall is the body tag, if you inspect it in firebug or chrome inspector tools?

My first guess is that the body element is not as tall as you might think and setting a min-height attribute or height of 100% might help identify if this is the case.

Jason Shillingford
Jason Shillingford
6,443 Points
Jason Shillingford
Jason Shillingford
6,443 Points

A quick fix is to add width and min-height to your body{ like Andrew Whitfield said but...

Probably best if you create it all in a div tag. This is what I would do.

make a div tag with id

#id{ width:980px; min-height:500px; margin-left:auto; margin-right:auto; background-image:url(../img/backgroundimage.jpg); }

Making the image type jpg or jpeg will make for smallest file size and average/good quality.

Assuming your image is 980px by 500px to match your div container. Change it to make your image size match the div size or vice versa.

Ryne Smith
PLUS
Ryne Smith
Courses Plus Student 2,318 Points
Ryne Smith
Ryne Smith
Courses Plus Student 2,318 Points

Thanks for all the help. I fixed it first by specifying the size pf the body tag, but ultimately opted for a placeholder div inside the body tag.

However, when I first checked the size of the body tag, it said 1276px x 0px. So the body tag was collapsed I guess because there were no elements inside it. But then how was even the lower half of the image showing on the webpage?

Ryne Smith
PLUS
Ryne Smith
Courses Plus Student 2,318 Points
Ryne Smith
Ryne Smith
Courses Plus Student 2,318 Points

Also, 

html {
min-height: 100%;
}

seems to fix it too. If I do it this way, I don't have to size the body element. The problem is that I don't know why this works since I use the body selector to put the background image in the body. Since I didn't specify a size for the body, it seems to me it should still collapse.

Jason Shillingford
Jason Shillingford
6,443 Points
Jason Shillingford
Jason Shillingford
6,443 Points

You'll probably find different browsers interpret it differently, where some may have a default body size and make it 100%. Others may collapse it to 0% if it has no value. This is just a guess though.