Ivor O’Connor

December 23, 2009

Automatically Resizing Background Images With CSS3

Filed under: Uncategorized — ioconnor @ 3:26 pm

I like fluid web designs. And I expect background pictures, say those used in a header, to expand and contract as the windows is pulled about. Unfortunately this is not quite fully supported. However it is good enough. The pictures resize instantly with no noticeable delays in all browsers except for ie.

In the css add:

#header {
background: url(‘mtn.jpg’) no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%;/* Safari 3.0 */
-khtml-background-size: 100% 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}

In the html add:

div id=”header” blah blah /div

(The div tags are missing their angle brackets because I don’t understand how to make wordpress show html code without it altering it.)

Which should cause the picture to stretch to fit the width and height. I’ve tested it with ie, firefox, opera, konqueror, and chrome. Chrome works perfectly with no hacks even allowing for rounded edges. It sort of works with firefox, opera, and konqueror but you lose the rounded edges. Internet explorer does not work at all unless you consider seeing only part of your image a success.

Anyways, this is a great solution which most people do not seem to know about. The awful javascript, sliced photos, and css tricks that saturate the internet are no longer needed…

Much of this information came from https://developer.mozilla.org/en/CSS/-moz-background-size

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: