Website Construction for Visual Artists

Controlling Backgrounds With CSS

Colors

Background colors can be established as properties of the <body> of your document. In an external stylesheet:

body {
background-color: #000000;
}

or as inline CSS for your <body> tag:

<body style="background-color:#000000;">

The CSS background-color property can be applied to content objects as well: tables, table-cells, <p> paragraphs, <div> and <span> tags, etc.

Images

As the Paper Rad site can attest, background imagery can be distracting and even quite annoying. A much more typical problem is a site with a stark background image that makes overlying text hard to read. But let's begin with how these work in the first place.

<body style="background-image: url(media/ferret.jpg)" >

<br><br><br><br>

<h1 style="color:#ccff00">Text content</h1>

<br><br><br><br><br><br><br>

</body>

Text content

I also include some inline CSS to make the <h1> header text lime-green, so that it could try to be seen up against such a backdrop. Still, it's not easy on the eyes, so I'm going to give the text-object a background color:

<body style="background-image: url(media/ferret.jpg)" >

<br><br><br><br>

<h1 style="color:#ccff00; background-color: #990000; width:150px;">Text content</h1>

<br><br><br><br><br><br><br>

</body>

Text content

*I also gave the <h1> tag a width of 150 pixels so that the scarlett background wouldn't stretch across the screen. This is necessary because <h> is a block-level element -- regular text with a background color wouldn't need a width.

A background image can be designed so that the default tiling bahavior results in a seamless pattern:

Text content

The background-repeat property can be used to restrict the background tiling along the top (repeat-x) or left edges (repeat-y) of your browser window. Here is a 50x50-pixel image that I made in Photoshop with the gradation tool, transitioning from light blue to Web-safe pink (#ff66ff -- you'll see why):

Here's my scripting:

<body style="background-color: #ff66ff; background-image: url(media/gradation_top.jpg); background-repeat: repeat-x;" >

<br><br><br><br>

<h1 style="color:#ccff00">Text content</h1>

<br><br><br><br><br><br><br>

</body>

And here's the result:

Text content

Here's a variation of the image that I'll use to tile along the left edge:

The script:

<body style="background-color: #ff66ff; background-image: url(media/gradation_left.jpg); background-repeat: repeat-y;" >

<br><br><br><br>

<h1 style="color:#ccff00">Text content</h1>

<br><br><br><br><br><br><br>

</body>

The result:

Text content

You can also use background-repeat: no-repeat to prevent the image from replicating. This can be useful if you want a single image to float behind the content. You can look into the W3C CSS background properties page to find out about controlling the page position of background images.

Next: Posting to a server Top