0

I am seeking help with trying to fix my background image fill issue. I wanted to have a sticky footer, which I finally figured out, but now if I view my site in a smaller window and then scroll down, my background image disappears. I understand that this is due to my height settings being 100% which makes my image be based off of the initial viewport size, but I can't quite seem to implement any kind of fix.

Here is the site I am working on (still very much under development): http://student.plattsburgh.edu/stipl001/index.html.

The problem is best viewed when looking at this page in a small window: http://student.plattsburgh.edu/stipl001/resume.html.

I have read many, many posts on various sites trying to figure it out (including this one: CSS: background image does not fill when scrolling), but I am not having any luck. I tried setting all the different properties for background in css that I could think of, including some of the newer ones. Then I experimented with the overflow property, but it just hides all of my text or creates a weird scroll-bar that makes my text scroll up over the header. I also tried moving my page background from body to html and my container background from container to body, but it didn't change anything, so I must be doing something wrong (perhaps the fact that I have the two background images to deal with?).

I'm just a coding newbie and have been teaching myself as I go along, so I would really appreciate specific suggestions on what method of fixing this would be best for my site, and how I can go about implementing it. After spending about 10 hours straight on this one problem, I am at my wits' end.

Thank you so much!

Community
  • 1
  • 1
kyreth
  • 3
  • 1

1 Answers1

0

just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...

EDIT:

previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer. This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.

See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.

Hope it helps...

ptriek
  • 9,040
  • 5
  • 31
  • 29
  • Thanks for the advice! That is how I had my site set up initially. It does work, but it also means that people have to scroll down through empty space in order to see the footer, which is what I was trying to avoid by making the min-height: 100%. I guess if I can't find another alternative, I'll have to resort to setting a px value for the height again, but I was hoping not to have to. – kyreth Dec 04 '11 at 21:10
  • Yes I realized that just now. But as you mention it - your fixed footer isn't working properly either... Give me a minute, I'll see if I can fix something for you – ptriek Dec 04 '11 at 21:13
  • You are my hero! That did exactly what I needed it to do. I had put the clear:both attribute under #footer, but didn't think to put one within #container. I feel so much better now, thank you for your help! Edit: As far as the formatting of the footer goes, I tried using the set-up from your link, but I don't think a fixed footer is what I am looking for; I like it stuck at the bottom of the page, even if that means it's off the screen. Is there something specifically wrong with the way that I have it coded now? – kyreth Dec 04 '11 at 22:39
  • glad i could be of help - it was especially the 'After spending about 10 hours straight on this one problem' that stirred my compassion :-) – ptriek Dec 04 '11 at 22:43