Main Points

Cascading style sheets (CSS) gives you a lot of options to position items on the page, but it's not perfect. There are a number of kinks in CSS, especially with implementations across browsers. So here are some of the things to watch out for.

CSS Positioning Right

Positioning objects with CSS is pretty easy on a basic level. Using the background-position property you can set the value to "top left" and the image will sit in the top left corner of the element and stick there. By applying sufficient margin / padding to the objects inside the element, you can create space around the image creating the effect of an <img> tag where text flows around the image no matter what size the window is. Obviously then, it's much easier to let text flow across the image, a trick you can't do with an image tag. It's also why these images are referred to as background images, they're literally in the background and it takes some work with margins and padding to make them "appear" to be in the foreground.

So the next step obviously is that you'd like the option to stick something in the "top right" corner of an element. Well, that causes problems already, and it will come as no surprise that the culprit is Internet Explorer 6. In IE7, Opera, Safari, and Firefox, the "top right" value has almost the same behavior as "top left". There is a minor difference. When the browser becomes too narrow and the CSS for the page starts to break down, they break in different ways. "Top left" background images fall to the far left and elements with margin / padding to clear the image hit that boundary like a wall. The elements begin to stack up, effectively creating a minimum width and force the browser to create a scrollbar to view the entire width of the page. This behavior is seen in all browsers (IE, FF, & O).

A test image with position: left behaves like an image displayed with an image tag when we apply proper margins to the heading which displays beside it.

"Top right" background images when the browser becomes narrow will violate the margin / padding and rather than create a minimum width, begin to share space with the element passing either over or under it.

A test image with position: right slides into the space occupied by the heading even when we apply the same margins to the heading which worked for position: left.

Nevertheless, the results of "top right" conform to what you would expect in less extreme widths in most browsers (IE7, FF, S, & O). For the most part then, top right is quite usable.

An image that demonstrates how a test image with position: right, moves with the browser window automatically as the browser is resized in IE7, Firefox, and Opera.

If you take IE6 on the other hand, the situation is very different. The "top right" will only collapse as far as the largest child element will permit, and the image gets stuck at the right edge of this element. Note how the right edge of the test image and the right edge of the table are lined up in the full size example and this never changes no matter how the browser is resized. Infuriatingly, it displays this behavior even though the child elements like the heading in the example DO adjust to the changing width of the browser. Ironically, this does mean that IE6 never overlaps, but that is cold comfort. If IE6's behavior will cause problems for you than you are stuck without "top right" as an option until IE6 dies the horrible death that one day awaits it.

An image that demonstrates how a test image with position: right, does not move as the browser window is resized in IE6 - contrary to the behavior of all other browsers.

Playing with potential solutions, I have a new appreciation for why virtually every layout in CSS Zen Garden is a fixed width layout. Fixed width content permits you to position background images by pixel and have them consistently wind up where you want them. Fluid layouts do not give you the same flexibility even though they're more adapative cross-browser. This allows more complex design schemes with fixed width layouts given these limitations in CSS.

Another interesting issue with background images is that if you put them in a container, they must be inside it to be visible. I've tried several different scenarios, where I tried to push background images a bit, but if the container div is too small or if part of the image is pushed outside the boundary, then that part vanishes.

Despite a couple articles I read to the contrary, when I applied a position absolute to a child div, it blew outside it's parent div. Oops. I was hoping to solve the IE6 position:right issue by placing those images in CSS Zen Garden style divs. However, since the website layout is fluid, I can't assign the vertical position for it in the same way. I tried putting one of the extraDiv elements as a child div inside the section I wanted. However, when I assigned background-position:top right, instead of going to the top right corner of it's parent div it whooshed all the way to the top right corner of the webpage. Frustrating. Sometimes CSS seems tremendously convoluted. I wonder if I will ever feel like a master.

Skip to Main Points

Photoshop Tricks

Be careful. The best results in transparency can be achieved with .png files. Now we're talking about the PNG-24 format, not PNG-8 which does not really support transparency. .pngs allow the most advanced transparent effects of the three image standards, primarily they allow 0% (opaque), 100% (transparent), and anything in between. .jpgs don't allow transparency in any form, and .gifs allow 100% transparent as a color but no gradations. So .pngs would seem the logical choice when you need transparency. Except they fail in Internet Explorer 6. If you don't care to support it (as of today, 1 in 4 people are still using IE6), then you can go for it. However, if you don't want people in IE6 seeing an ugly grey background, you need to get a little more creative.

This image shows the normal sophistacated transparency effects of a PNG background in Firefox and Opera on the left; this is contrasted with the behavior in IE on the right where the "transparency" simply appears as a shade of grey.

First, the only other choice you have is a .gif file. Two, the reason you like the partial transparency is so that you can create fade effects and drop them on top of any background and they'll work. With only complete transparency to work with, you'll have match the background of the image to whatever is behind it. This means your implementation is completely tied up in your background... there really is no general solution that works in all cases. It will depend on your background. For my background, I have the top of the image against a gradient (hence why I really wanted partial transparency) and the bottom reflection against the tan background. I adjusted the image in size and position until the entire fade was able to rest against a solid color background (no gradients, no details, just a flat color). If there's any advice I can pass along, that would be it. If you want a fade effect, make sure that effect falls against a solid color on the webpage and give that portion of your image a background of the same color in Photoshop. Any portion of the image which doesn't fade, will be either a color or completely transparent and will ride over any background beautifully.

Not least in importance is getting a decent .gif to work with in the first place. I've found in Photoshop that you tend to get a border between the opaque and transparent pixels when you use default settings. When you go to save the .gif, naturally you will need to have the "Transparency" checkbox checked. There is also a transparency dither you can set. If you leave it set to none, I get white borders around the opaque image. However, if you switch to Diffusion Transparency Dither, the dither breaks up the white line achieving a much more natural effect.

When creating gradients, getting the effect you want is a long and time consuming task. Don't get frustrated. A good gradient may come together quickly, but for me it's the result of a lot of time and work. It's important to work on several layers. If you use the gradient editor in Photoshop you have two moving pieces at the same time and you lose control; this is much more hit or miss. When you apply the gradient, it depends on exactly how far and in which direction you drag the mouse; not really the most exact and controlled way to do things. Then you also have to have configured the gradient editor precisely the way you want. And if either of these factors don't go right, you have to unapply the gradient and start over. It provides much better control to apply each color or object to a different layer and adjust the boundaries between them with vector masks painted in gradients. This way you can undo portions of the work without having to undo eveyrthing; it's more progressive and efficient to be able to get part of the gradient the way you want and move on to another part than to unapply the whole enchilada, tweak some settings and try again.

Background images also have another fairly unique qualification that other images don't. Sometimes you want them to tile; depending on your design, it may be built in that the "seams" will be jagged or effectively hidden, however, other times it is critical that the opposite edges of a background image meet seamlessly to smooth the repeat effect. With gradients, this is especially important. Therefore, when I'm trying to get an image that will tile, I make the last action, the crop. I study the entire area around the area I'm going to crop so I understand the gradient coloration to be sure I'm sizing my crop area properly for the image. I'm also not shy about zooming in - significantly if necessary - and using rulers and guides to perform the crop accurately. Make free use of the Info palette, it gives you vital information about your pixel position and dimensions (height / width). You may also need to touch up the edges; I've had to recrop and even had to repaint edges when Photoshop "adjusted" the color along one side. I don't know why the edges would be effected like this, but sometimes they are and you have to deal with it.

Obviously this is tricky, and it's very difficult to tell in Photoshop if you’ve done it right. Hence the crop is the last thing you do. I recommend cropping an image that you think looks good. Save the image, and leave everything in Photoshop untouched, just minimize it. Now you can tile your image see how it looks in the browser. That will tell you how successful you really were. Now return to Photoshop and you can back up as little or as much as you need to, and make a modified image. Give it the same name but make it number 2 instead of number 1. Update the stylesheet with the new image name and repeat this procedure until the image displays the way you like. Then Save your Photoshop file and all the image (the good one and the bad ones) to your assets folder.

Skip to Main Points
<-- Back to CSS / Design Play
Continue to CSS / Design Play -->
<---- Jump back to CSS / Design Play