How do I replicate this background image effect?

Question

Using this example: http://www.meridianapps.com/

I like the way the background image expands and enlarges when you open the browser wider. But it also has a minimum width if you try to minimize the browser.

I would like to replicate this. Can someone point me to a plugin or code that I can use to insert something like this into my site?

Answer 1

They are using background-size: cover; which scales the background image to be

... as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

Here are the docs from Mozilla.

This attribute should work in any browser except IE8 according to Can I use... .

Answer 2

Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword. try this

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

taken from here