Main content begins here

Background Image Resize

Monday, November 1, 2004

UPDATE: March 6, 2009... This works in IE7! Woot!

Someone asked the other day if anyone knew how to make a resizable background image. Another person, far more knowledgeable than myself (which could be about anyone at this point), replied the topic has been brought up before and no one found a solution. That often makes me want to give it a shot myself because I am a glutton for failure.

Picasso, Super-Sized

As someone else had pointed out, we’ll be getting “background-size” in CSS3 which I believe will be widely supported sometime in the year 2030. That means I couldn’t help but fail. So I dove right in. I wanted to go ahead and get my failure over with quickly.

As is often the case in this situation, I too failed to find a “real” solution to this problem. But as is sometimes the case, I found a really cheesy, down and dirty way to get around the issue, partially. Really, it’s just half-assed parlor tricks but maybe it’ll help you if you’re the cheesy, down and dirty type as well. I got tired of trying to figure out how to get it to work fully in IE so anyone that wants to offer a solution to that, feel free.

Cheese, By The Slice

So this won’t work for the vast majority of regular Joe users out there but it will work for about half of you since many viewers of this site are Mozilla users. IE users, it works but only to a degree... the slight of hand breaks down quickly.

This basically involves just slapping a DIV with content on top of another DIV that contains an image, essentially making that second DIV into a background. You use "em" for height and width of the image. Mozilla viewers will see in “Resize Image Background” that the text stays in the middle of the pizza when you change text sizes (oh, yeah, and the background gets bigger too). While IE viewers start out in the middle of the pizza obediently, they soon become unruly and their text moves up or down depending on the size. Even though the text position was not really my objective it seems like there should be an answer to this. My head hurts though, so I am stopping for now.

[The usability updates are] great and you did it so fast. Does that mean I only owe you $50. :) Seriously, this is very good.
R.M. Cerise Computers
Copyright ©2001-2018 Way Cool Web Design LLC. All Rights Reserved.