Now for a little background…
A regular reader, I’ll let her identify herself if she chooses, asked me a question about background images. Since I’ve received similar questions before, I thought this would be a good forum for answering them. Here is a short list of background questions that I’ve received. I’ve taken he liberty of rewording them so that they are more generally applicable.
- Do you make your own backgrounds?
- How do you make backgrounds?
- Can you just take a picture and make it repeat with code?
- Some backgrounds are very subtle, almost invisible, how is that done?
- Can you use more than one background?
Do you make your own backgrounds?
Yes, I do all of my own backgrounds. I do all my own image work for the most part. I’m a perfectionist, and rarely satisfied with using someone else’s work. It’s not so much that I dislike the quality of work of other designers, but that their vision of a design isn’t the same as mine. By doing my own image work, I can create an image for exactly the purpose I want, rather than adjusting the design to match the image I have.
How do you make backgrounds?
Background images come in two general types, repeating and non-repeating. Repeating images are used a lot more often than people think. It can be a great way to reduce load time. Take my sidebar image for example. Every theme I’ve put together for this site in recent memory has used a repeating image to define the sidebar. One of the things to take into account with a blog design is it’s fluid nature, you never know how long the page is going to be. By using an image that repeats vertically allows me to compensate for that. The sidebar image’s repeating nature allows it to fit regardless of page length, and it loads in a fraction of the time of a longer image.
How do I make a repeating background image? Some image by their nature can repeat. For instance a solid black box could be repeated both vertically or horizontally to make a black line, or repeated both directions in order to change the background color of whole containing element. More complex repeats like the saddle texture I like to use on the left side of this site take software like PhotoShop. I first carefully select the area I wish to repeat. Don’t underestimate this step, because the smaller area you can select, the faster your page will load when you use it. Then I use a PhotoShop filter called Offset. It’s listed under the Other menu at the bottom of the Filter pull-down menu. This allows you to shift the image so that it wraps. For instance when you offset upward, the top of the image wraps around and comes up from the bottom. This doesn’t fix the seam caused by repeating an image, but it allows you to do it manually. Just make sure to offset your image in the direction it’s going to be repeated. This is where choosing your section carefully helps out. If you’ve chosen to repeat an area that has similar colors and textures, fixing the seam takes only the slightest use of a couple of key PhotoShop tools. A little Healing Brush or Clone Stamp, and the area disappears. Other image editing software can do the same work, I just happen to use PhotoShop.
How do I make a non-repeating background image? Creating background images that don’t repeat isn’t technically difficult, but it can be frustrating. What I’ve seen to be the most important question is where is it going to be placed, and in what context? As an example, let’s consider header images. If you have a fixed width site, the header width is determined by the page width. If your page width is 760 pixels, the header image you’re using either needs to be 760 pixels wide, or look appropriate in that context. Personally I prefer fluid width blog designs. This makes the header image a little more tricky since the header size isn’t constant. Any header image I use must look appropriate at any reasonable page width. I’ve recently used two different solutions. My current solution is to use four smaller images which blend into the background color that I’ve assigned my header. This allows the background to stretch or shrink, without showing image edges because the header background color fills in between them. My previous fluid blog theme used repeating texture to fill the space and the header image had a transparency to allow it to blend into the repeating pattern. These two factors gave the impression of one seamless header image, but loaded much faster.
So, how do I actually create a non-repeating background image? The key to background images in general, and non-repeating ones specifically is mostly about context. It has to fit with the rest of the page. If you’re using a fixed width page, it has to fit the space. If you’re using a fluid width page, it has to look good at various sizes or be placed in a portion of the page that doesn’t stretch. For the actual image work I use PhotoShop as I’ve mentioned before, but any image editing software could be used. The actual techniques vary dramatically. Your can fade to a background color or fade to transparency. You can extend the image to fit into a predefined space. You can adjust color or make any of thousands of other adjustments. Your techniques will be defined by the type and nature of the image needed.
A few words of warning. Always consider load time. Big images take a long time to load. Image formats that allow for transparency tend to have noticeably larger file sizes than JPEG files with similar images. So, given the choice, fading to a background color and saving as a JPEG will give you a smaller file than using transparency and saving as a GIF or PNG.
Can you just take a picture and make it repeat with code?
Of course, however using some form of image editing software and modifying the image to better suit your purpose is always a good idea. Just because you can repeat an image doesn’t mean you should.
Some backgrounds are very subtle, almost invisible, how is that done?
Subtle fades and transparencies can be done in most image editing software. Using the GIF or PNG formats, you can give a image actual transparency, letting it fade into the background of your choice. A better choice though would be to fade the image into the background color or your choice while still in the image editing software. Then you can save as a JPEG which will save you on load time. While this doesn’t allow for transparency, it give the effect of transparency, which in this context, is the same thing.
Can you use more than one background?
No… and yes. While it isn’t possible to give an HTML element two backgrounds, it is possible to make it look like you did. The trick is to use concentric DIV elements, each with their own background. This can give the visual effect of two backgrounds, or of one background larger than either individual image. As I described above, you can use one repeating element to fill the space, and one non-repeating element for visual interest. It’s a great technique, and I use it frequently.
None of the techniques I’ve described here is the perfect solution, but used together, they’ll help you find the technique that’s perfect for you.
Trackposted to Perri Nelson’s Website, Rightlinx, A Blog For All, The Crazy Rants of Samantha Burns, stikNstein… has no mercy, Adam’s Blog, basil’s blog, The Right Nation, Pirate’s Cove, Stuck On Stupid, Cao’s Blog, The Bullwinkle Blog, , Conservative Cat, and Right Voices, thanks to Linkfest Haven Deluxe.



