Body background image, full height, responsive

Get Started
1

Hi, I want to be able to get a background image go down to the bottom of the browser window, even when there isn’t any content on the page.

I want the background image to behave exactly as the one here does: http://robcubbon.com/dev/ongala/home-6.html – the height of the image is 100% the height of the browser window and the width covers the 100% of the browser window and crops off the sides if necessary.

I have tried to recreate this here: http://ongala.co.uk/ and have copied the CSS line for line (I think) but I can’t get the same covering of the browser window to happen.

What am I doing wrong?

2

Personally, I would place that background image on the body element itself. Seems much neater that way to me, rather than relying on an inner div. Something like this:

html, body{height:100%;}

body {
background: url(images/bg7.jpg);
background-size: cover;
background-repeat: no-repeat;
}
3

Ralph, thanks again. You helped me out with a MAMP issue the other day! Thanks a lot. If you ever need anything from me please don’t hesitate to ask!!! :slight_smile:

4

Glad that helped, and thanks for the offer. There are probably better solutions (for example, ones that work in older browsers too), but this seems to work OK in modern browsers. Paul just posted a nice demo here of a solution that works in IE8 too: http://www.sitepoint.com/forums/showthread.php?1012883-Background-image-of-wood-with-different-different-texture-horizontally-and-vertically&p=5374942&viewfull=1#post5374942

5

Great, thanks for that (I’ve follow you on G+ and Twitter)

6

I’m probably going to get myself shot for this, but there is also a nice jQuery plugin to do this.
This basically allows you to add a dynamically-resized, slideshow-capable background image to any page or element (so you can also achieve the fade in effect of the page you link to).

I used it to make a demo for someone in the JavaScript forum recently.
You can check it out here (try clicking on some of the links to see the background image change).

Don’t know if this helps much, but I thought I’d chuck it out there anyway.

7

Pretty cool, Pullo, thanks!

8

If want to have a full size image , create or download the bigger sizes of it . because if you choose small images when resized it will appeared pixilized . not like the bigger once . :slight_smile:

9

I’m using 1600 x 1100 px – thank you, Jason

10

Better to place it on the html. Here is a itty bitty tut I did on this the other day http://www.websitecodetutorials.com/code/css/css3-full-size-background-image.php