I just received this psd image, which I have to convert in to HTML. I am having problems with the background image at the bottom of the page. When using a full screen background image I know how to handle it but have no idea what properties to use for this image that should start at 400px from the top but should extend until the bottom of the page (100% height)! Any suggestions would be highly appreciated.
That’s tricky, and I’d suggest an alternative. IMHO, having the background extend below the footer like that if really fugly and looks unprofessional. Personally, I prefer the footer background to fill any remaining space at the bottom of the page, so I set the body background color as the footer color, so that there’s never a gap at the bottom. That way, you also get out of this problem. With this setup, you can then set the background image on the content area and use background-size: cover.
Hi Ralph, thank you for you reply!
IMHO, having the background extend below the footer like that if really fugly and looks unprofessional.
That are my thoughts as well so I will try to get the designer to other thoughts
Hi Ralph. I have to come back to you about this one. I’ve got the designer so far that he agreed that the background image is not extending below the footer any longer! So I can indeed use background-size: cover. property. But now I am facing the following problems. first of all how do I get the image underneath the white content. Right now I have the white content as a background on the wrapper but that isn’t working at all (the photo is going over the white background and In the example I have just some text, but there will be probably pages (for example gallery page) that will have more content. How can I make that background image grow along with the actual content on the white background? The second problem i have is with the
Thank you in advance
It would be better if you could post an actual live example to show where you are up to.