Overview
Design Choices
Boilerplating
Ready-to-Style
Simple Styling
Backgrounds
CSS Exercises

After restyling with Google Fonts and adjusting a few properties: Recommendations for Government | See raw .HTML | .CSS

Background graphics

Backgrounds can be fun to build in CSS because you have a lot of options. These work fairly well because (1) it's the background, so a little bit of distortion of misalignment is hardly noticeable; and (2) there tends only to be a single thing (in this case, an image) that you need to place on the screen. CSS is a superb technology for placing one thing in one place.

On our To-Do list, I mention that we'll need to create a background graphic and then add it to our CSS and HTML. Remember this whenever you are creating any graphics to use in the background: They're too busy. I can't see them, of course, because you live in the future, and I am consigned to the past. But I can tell you this: You need to simplify your graphics further, or your busy background runs the risk of exhausting your viewer when she tries to read the content on your site. Don't make the content on your site compete with other elements: Ensure that your content can communicate unimpeded with your users.

A Striped Shim

In order to ensure that our background is precisely what I want, I'm going to have to make it myself. PhotoShop, Illustrator, and any number of other software image processing suites make this really easy.

Sampling color in PhotoShop
Sampling color from an ADL PNG file in PhotoShop.

Here we are in Photoshop. Precision regarding color is so important at this stage, so I've captured a graphic from the ADL site to use with this draft of the site. It seems to contain the two blues that are vital to the (new-ish) ADL identity, so I'll collect the color from this graphic using my eyedropper tool and sampling a 3x3 area (at the least).

It is important to understand that this cannot be a substitute for the way you deal with color at the end of a project: Getting colors off the web is a good start, but you should always insist that the client's in-house comms group provide you with up-to-date, accurate color data and identity guidelines. Taking colors from a JPEG image, for example, means that you may be sampling the original color, or you may be sampling compression artifacts that are difficult to see in this context (but will be easy to see when the blue on this page is arrayed next to blue swatches from other, more accurate pages).

Once I've sampled the blue I need, I create a new document with a custom size. In this example, it was 1800 pixels wide by 20 pixels high. Which seems a bit much, I'm sure, but in a couple of years won't work very well...

Download the full-sized shim as a PNG file.

The size should give you a clue about how I'm going to use this shim. In effect, we'll paste it in the upper left-hand corner of the website, and then use CSS to "tile" the image down the page -- that is, to repeatedly copy the first 20 pixels all the way down the y-axis. But if our shim is built right, that copying won't be visible: It will look like a single, seamless document -- and since it is tiled, it saves us a lot of browser memory and network bandwidth.

So why 1800 px? It's an arbitrary number, but the important thing is that it stretch beyond the far right side of everyone's screen. That's harder and harder to do reliably, as pixel density increases and the price of widescreen displays drops. But for our purposes, 1800px is more than enough.

a shim
1800px by 20px blue-edged shim for tiled background. Considerably reduced in size and outlined in light grey for visibility.

I filled the shim with white (#FFFFFF) and then put a narrow block of blue on the far left-hand side. Note that once you do this, you cannot enlarge or shrink the file, because you'll force PhotoShop to recalculate the boundary between the blue and the white, and that dividing line will become a bit blurry (which won't work as well when we use it as a tile). Also be sure to save the file as either a GIF or, preferably, a PNG. The JPG format introduces compression artifacts, which are tuned for photographs (where they are easily concealed), not for graphic design (where solid colors and shapes make artifacts especially easy to see).

Tile Our Background

This part is comparatively easy. Open up our current CSS file, and go to the BODY tag of the selector. By default, the BODY selector comprises the entire visible page (although this can change). So by plastering our picture all over the BODY, we can be confident that it will cover the whole screen AND remain safely behind all the other selectors.

Importantly, I use the background-repeat property to change the default layout of the tiling. Normally, it tiles our image both horizontally and vertically. But we're not interested in the horizontal (since we hope it never needs to be tiled in that direction, anyway). We just want to know that the image is repeated along the y-axis.

body {
     background-image: url("assets/ADL_backing_a.png");
     background-image: repeat-y;
}