using a modem, or just want to change this site's design? try these...
website design techniques » November 2004: “Background Image Resize”
most recent project
CORE BT Application Graphical User Interface (GUI) and Advanced CSS Design. Requirements included outstanding design and flexible advanced XHTML/CSS
web site design tips
This month’s website design tip is on the topic of vector vs. raster graphics.
web site design techniques
This month’s website design technique demonstrates a wacky way to fake a resizable background image in a DIV.
Faking a Resizable Background Image
by John Barrick
Someone asked the other day if anyone knew how to make a resizable background image. Another person, far more knowledgable 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.