Make a stretchy background using CSS

We get a lot of questions about how to do things and one question that we’ve got a lot recently is “How did you make the Meridian background automatically resize?”.

What they are asking about is this…

Notice how the background of the house is changing size as the browser resizes?

It’s a great effect and pretty easy! I think it something that should be worked into every framework/theme out there as an option for the background image and it’s called “cover”.

What it does is it fills the entire browser background with your image by resizing the background image up and down so that the sides and bottom of the browser are always covered with your background image.

This makes lining things up with your background image impossible as you’ll never know the browser width of the person visiting the site but if the background image is just eye-candy, making the image ‘cover’ is the way to go!

It’s super-simple to do, just copy this CSS:

body {background-size:cover;}

and paste it in your Custom CSS tab, like this:

Now once you select a background image it will be stretchy/resize to fill the browser on every screen / device!