Images

Background Image Resize

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.

Vector & Raster Are Not A Type Of Dinosaur

I still run into lots of folks who don’t really understand graphic image formats and image resolution. It can make a big difference in how images appear in their final form. It sure was confusing for me when I was starting out. Here’s the lowdown.

There are 2 main categories of electronic images:

• vector
• raster

Vini, Vidi, Vector

Vector images are fomats that use mathematical equations to represent the lines, curves, etc of your image and therefore are much lower in size on your hard drive than a raster image. As long as you keep the image as a vector format you can resize it with no loss of clarity, over and over again.

Adobe Illustrator is one example of an application that produces vector images. Vector images are great for images that have more areas of flat colour. Passing your logo around as a vector image is good because people can resize them and it will remain crisp when printed or exported. Vector images are not good formats for images like photographs, which don't often have areas of flat colour. Common vector image file types end with these file extensions:

• .EPS
• .AI

Rast, Raster, Rastest

Raster images use dots (ink dots when on paper, pixels on your screen) to represent your image. Raster images describe every dot of your image as a colour and a bit depth and where it is in relation to other dots in the image, so it is therefore much larger than a vector image. Raster images get "fuzzy" when you make them larger than the original because your computer has to guess (interpolate) what dots should come between the other dots to make the new dots it needs for the larger size. Raster images are generally OK to shrink down, though if you have an application that allows it you should "sharpen" the image after shrinking to make it crisper. Adobe Photoshop is one example of an application that produces raster images, though it also now incorporates some vector formatting. On a PC, Paint is a raster application but it doesn't have many tools because it's free. Raster images are great formats for photographs. Common raster image file types end with these file extensions:

• .PSD
• .TIF (or .TIFF)
• .BMP

Rast, Raster, Rastest

.GIF and .JPG are special raster formats. They are compressed formats and should not be used until you are ready for the final stage of image processing. For example if you've been in Photoshop touching up a photo you should be saving that file as a PSD (Photoshop document) then when you are ready to put that image on, say, a web page, you save another version out as a JPG or GIF. Often, photos generally save out for the best as a JPG, and vector images as GIF, though that’s far from a hard and fast rule.

Every time you re-save a JPG (or GIF if you choose less colours than the original GIF) you re-compress it, lowering the quality. That’s why these file types are best when created from the source document. JPG and GIF are not very good files to use as original source images. One exception is that some JPGs are saved out with very slight compression, set to 100, which compresses the image just enough to bring the file size down to a more acceptable size but also does not ditch too much data. Another exception would be if your original has 256 or less colours, in which case the GIF format could save it out exactly as the original.

Here's a more detailed look at image types.