How To Make The Background Image Fill The Entire Viewport

HTML & CSS
1

LINK-
http://www.tds-exhibits.com/test/

The background image stops at the end of the DIV that has content and I am wanting it to continue to extend the entire viewport EVEN when there is a short page with not alot of content. Can someone tell me where I went wrong and how to fix it?

Todd Temple

2

I added the background to the body tag and it looks screwed up. Can someone else help solve this problem?

LINK-
http://www.tds-exhibits.com/test/index.091310.html

3

  1. “left top” and “0 0” or not declaring any position at all all mean the same thing. I you really want a bg to begin repeating at the top left, you shouldn’t have to declare anything UNLESS you have another rule that has previously cascaded down to your target element and you are trying to rest that. But really it would be wiser, even if more work, to fix the cascading specificity problem. Anyway: you probably don’t need the “left top” or “0 0” ;

  2. The background will only apply to the element to which is assigned. The problem is not so much that the bg is stopping, is that the DIV is stopping, follow? I didnt have time to examine ALL YOUR code, but PLAY AROUND with this:

html , body, * html #outer {height:100%}
#outer{min-height:100%}

  • html #outer {height:100%;}

or if you are going to apply Mitt’s suggestion, change the background position to “center top”. This will only work, as long as your #outer div is centered to the viewport ( using margin:0 auto}

hope that helps.

4

I think it has something to do with the way browsers determine 100%, eg. if the page is 20px high, then 20px is 100%

I see

<body>
<div id="outer">

I’m not a CSS guru so I’m mainly guessing, but maybe if you gave the background image to the body instead of the div?

EDIT: I see what you mean about the other pages. But I don’t see anything that would explain why the div goes all the way to the bottom in those. :fangel:

5

Yes, on the home page it stops before extending to the entire viewport. But on other pages that have more content it extends all the way to the bottom.

6

Are you talking about

#outer {
 width: 1000px;
 margin: 0 auto;
 background: url(../i/gfx_bkg_wrapper.png) repeat-y 0 0;
 height: 100&#37;;
 overflow: visible;
 }

Maybe it should be “left top” instead of “0 0”?

Or another bug? http://reference.sitepoint.com/css/background

7

Glad you sorted it and sorry I missed your post.:slight_smile:

This is actually covered in the FAQ though :wink:

8

Ryan Reese figured this one out. It requires setting the min-height to 100% on my div outer. Thank u Ryan!