[solved] Make background stretch below footer

[rialni]

Hi,

 

I'm hoping one of you will be able to assist with something that has been bothering me for a while.

 

When I set up a page with an image background and have a footer that's 60px heigh, there's White Space below the footer. If the page is without a lot of content this sometimes shows on the homepage, which of course doesn't look good.

 

how do I make the background image continue beyond the footer?

 

Thanks in advance

 

Image shows the issue (here I decreased the size, so you would see the problem)

Edited October 29, 2013 by rialni (see edit history)

[gonebdg - webindoshop.com]

You can use css rule min-height for css id #columns

e.g

#column { min-height: 500px; }

Therefore your center column will have a minimum height (in this example it's 500px height) if the pages doesnt have a lot of content

[rialni]

Thanks for your reply It will definitely be better than where I'm at today, but I am sure I've seen other shops where the page doesn't go to the bottom but the background does?

 

Does anyone know how to do that? If not, I will use the min-height as solution

[gonebdg - webindoshop.com]

i'm a little bit confused about what you've said :

"where the page doesn't go to the bottom but the background does"

 

usually a web page height set as a dynamic value, where the page height will be affected by page content.

a height of an element in a web page can be set as constant value (e.g height: 250px) or have a minimum value (e.g min-height: 250px)

 

The background-repeat property sets how a background image will be repeated.

repeat     The background image will be repeated both vertically and horizontally. This is default
repeat-x     The background image will be repeated only horizontally
repeat-y     The background image will be repeated only vertically
no-repeat     The background-image will not be repeated

 

If you want the background image displayed in a fixed position, then you should use css position property : fixed

e.g :

body    { background:url(your-image.jpg) top right no-repeat; background-position:fixed; }

[rialni]

I'm sorry I'm not making myself clear.

 

I mean, when for example I'm on a screen with large resolution, the content of my page may only fit half the screen. However, I would like the background of the page to still be present below this content. As it is now, the full background Picture is not even displayed in the home site - only the top of the full image is visible. It stops where the footer stops. I want it to show 100% in height too. If I set background-size to 100% both vertically and horizontally it just squashes the image into the Space above the footer

 

Changing the min-height of the page is not an option, as it will just make the footer disappear  below the visible area in some cases and in others the min-height just won't solve the issue.

 

but thank you so much for your help anyway. I'm sorry, if I'm not good at explaining what I mean. I hope the above helps

[rialni]

Okay, if found a fix

 

In the reset section of global.css, the html background was set to #fff and when I removed it, it Works So issue solved