One of my 1^st year students had an interesting design for his 2^nd semester website proposal. The mockup of the main body content was strong and fairly traditional, but the background had his name in two different point sizes tiled at a 45° angle across the page. His question today was how to make that background happen.

If the lines of text were horizontal, the answer would be easy: take a slice out of the image and tile it in the background. But having the text at an angle with the line spacing he had presents a challenge, and sadly, there is no background-rotate property in the CSS3 spec yet (although it is proposed, and would be very welcome).

So there are really two questions: first, how large of a slice of the image to take in PhotoShop, and second, how to keep the space between the large and small lines of text consistent when the slice repeats.

My first option was to try to find consistent corners in the background image from which both lines of text could be tiled as a single image. That proved to be really difficult: while I assume that a PhotoShop utility like Pattern Maker filter might help, I didn’t wish to have to install anything, nor take a great deal of time.

Instead, I decided to be a little tricky, and took the lines of text as separate images, using them in the background of the web page with CSS3’s multiple backgrounds property. I will create an image tile for the small name (small_name.png) and a tile for the large name (large_name.png).

If the upper right and bottom left corner of each tile fell on the midline of the text and were as close as possible to the first and last letters, the tiling of the text would be symmetrical, and very close together. Increasing the canvas size of each tile would increase the distance between lines, but also the spacing between the repetitions of Dave’s name.

Repetitions of the larger image will be on top of the tiled smaller images. Left to itself, that would obscure all of the smaller images: but if we add a mask to the larger image, save it as a 24-bit PNG and then convert it to an 8-bit PNG with an alpha mask, we will still be able to see the smaller tiles underneath.

(The image was masked by making a marquee of the approximately correct size and then using Edit / Transform Selection … in this case you want to move the marquee, not what is underneath or within it, before using the marquee to create your mask.)

It is easiest if the large image is twice the size of the smaller image, but other image sizes could work just as well: you’d just have to play around with the size of the mask and the position of the large image when it is applied to the background.

The final CSS will look something like this:

1. body { background-color: #666;
2. background-image: url(large_name.png), url(small_name.png); }

(Remember that with multiple background images the images are applied in the reverse order – if small_name.png came first in the CSS, it would cover our large_name.png image.)

You could move the location of each tile (and thus their relationship to each other in the final page) by using background-position. I could have saved some file size and taken only the larger bitmap of David’s name, using CSS3 background-size to reduce it to make the smaller version:

1. body { background-color: #666;
2. background-image: url(large_name.png), url(large_name.png);
3. -webkit-background-size: 280px 280px, 140px 140px;
4. -o-background-size: 280px 280px, 140px 140px;
5. -moz-background-size: 280px 280px, 140px 140px;
6. background-size: 280px 280px, 140px 140px;
7. }

…but I always prefer to work with bitmaps at their original size, and as you can see, the solution requires significantly more code (as background-size is CSS3 draft, the property requires vendor prefixes) and the quality from image resizing is not as high as using the original images.