Jump to content

[solved] Make background stretch below footer


Recommended Posts



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 by rialni (see edit history)
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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; }
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...