Home/ Questions/Q 6918657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:53:16+00:00

I am seeking help with trying to fix my background image fill issue. I

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    • 0