100% Background Image with CSS

Glenn Glenn's Blog 4 Comments

100% Background Image with CSS 100% Background Image with CSS css tips

 

UPDATE 2014: Please now also see Full Screen Responsive Background Image with CSS

Something that I’m often asked is how to stretch an image on screen horizontally and vertically by 100%. In the past I’ve used a number of different techniques for this, but as usual it’s the simple solutions that are the best. In fact this method is so simple that you’ll probably be wondering what all the fuss has been about.

But before I enlighten you with the solution I should also let you know that stretching an image is available as pure CSS markup and here are some examples that I have pulled directly from www.w3.org

1. The first example stretches the background image independently in both dimensions to completely cover the content area:

div {
    background-image: url(plasma.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box }

2. The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:

p {
    background-image: url(tubes.png);
    background-size: 50% auto;
    background-origin: border-box }

3. The third example forces the background image to be 15 by 15 pixels:

para {
    background-size: 15px 15px;
    background-image: url(tile.png)}

4. The fourth example uses the image’s intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.:

body {
    background-size: auto;            /* default */
    background-image: url(flower.png) }

4. The fifth example rounds the height of the image to 25%, down from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, four images fit. The width of the image is 20% of the background area width and is not rounded.

p {
    background-image: url(chain.png);
    background-repeat: no-repeat round;
    background-size: 20% 30% }

Issues with this approach

It’s new CSS markup and not supported cross browser.

The Solution for 100% Background Image with CSS
(horizontal & vertical stretch)

Simply create a div and call it whatever you like. For this example I’m calling mine the ID ‘background’ for obvious reasons. Then mark it up with the following CSS properties:-

#background {
	position:fixed;
	_position:absolute; /*target IE6 only */
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: -1;
}

Note that the z-index is -1 as our image is to be in the background – don’t stick anything else on this layer and everything else will neatly appear above it.

Then place the following code directly after your documents body tag to call the element: –

<img id="background" src="/your-image-to-be-stretched.jpg"/>

And that’s it you are now ready to test your 100% vertically and horizontally stretched image!

I have tested this in Google Chrome, Firefox, Safari, IE7 & IE8. Alas it doesn’t quite work in IE6, but you can limit the loss here by calling a fixed _height for IE6 or as in my case just use a large image. It wont look too bad then in IE6 and hey it’s a ridiculously old browser anyway and we really shouldn’t encourage its use anyway!

Calling the div element after the Body with jQuery

Those of you that have been following my blog will already know I love jQuery and that I often look of ways to use it to replace other markup. In this instance you may decide you want to call the div from within your HTML, rather than physically after the body tag (so you could perhaps have a different background image on each page) and this is how you would go about it:-

jQuery(document).ready( function($) {
	$('body').prepend('image-markup-as-above100% Background Image with CSS 100% Background Image with CSS');
} );

Demo

Here’s a Demo (using the jQuery as primary call to action)

About the Author
100% Background Image with CSS 100% Background Image with CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Comments 4

  1. Post
    Author

    Update

    I know a lot of you have shown interest in this page so I wanted to give you a quick update on another great approach for 100% background image..

    A really cool way that we have used extensively in our projects is the great jQuery Backstretch by ‘Scott Robbin’. It’s effortlessly easy to reply with just the jQuery Plugin and a single line of code. Head over there for the plain download and details of how to impliument:-

    http://srobbin.com/jquery-plugins/backstretch/

  2. I was looking for a stretch version, thanks.
    Cheers. I send you a virtual beverage of your choice!!!

    And the js plugin comment. Yes it may work, but I like simple css whenever possible. Another plugin and js call is simply unnecessary. let CSS do its job – style and design. And let JS power any functionality not found in HTML/CSS.

  3. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *