with Lorelle and Brent VanFossen

CSS Unleashed – Experiments with Background Images and Backgrounds

The background element in CSS offers a wide range of possibilities including embedded background images, content over backgrounds, and backgrounds as art. As you play with your CSS experiments with backgrounds and background images, it’s important to understand how they work, where they work, and how to control their appearance. Let’s start with a few CSS experiments in placement.

For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.

This is an example of the background graphic in the left top corner of the container and not repeating. We’ve pushed the left padding over to make room for the graphic.
This is an example of the background graphic in the right top corner of the container and not repeating. We’ve pushed the right padding over to make room for the graphic.
This is an example of the background graphic in the right bottom corner of the container and not repeating. We’ve pushed the right padding over to make room for the graphic.
This is an example of the background graphic in the left bottom corner of the container and not repeating. We’ve pushed the left padding over to make room for the graphic.
This is an example of the background graphic in the left middle side of the container and not repeating. We’ve pushed the left padding over to make room for the graphic.
This is an example of the background graphic in the right middle side of the container and not repeating. We’ve pushed the right padding over to make room for the graphic.
This is an example of the background graphic in the left bottom and to repeat across the bottom. We’ve pushed the bottom padding higher to make room for the graphic.
This is an example of the background graphic in the left top and to repeat across the bottom. We’ve pushed the bottom padding lower to make room for the graphic.
This is an example of the background graphic in the left top and to repeat vertically – down the side. We’ve pushed the left padding over to make room for the graphic.
This is an example of the background graphic in the right top and to repeat vertically – down the side. We’ve pushed the right padding over to make room for the graphic.
This is an example of the background graphic in the center with no repeats. We’ve left the padding even and bolded the text to make it more visible over the graphic.
This is an example of the background graphic set to repeat to fill the entire container. We’ve bolded the font and lightened the color of the graphic so you should be able to read this.
To use a photograph as a background image, the size of the container must be set so the photograph will fit within it. The padding within the container adds to the height and width of the container, so the height and width may have to be adjusted to accomodate the padding.
 
The text within the container can be positioned within the container by placing it inside of another division. This one adds a margin of 100px to push the content lower inside of the container.
 
Since the height of the background image is 390px, we’ve pushed the division container for the text down even lower to 250px.
 

We’ve looked at how our CSS experiments have dealt with the positioning of background images. Now, let’s look at the effects of a repeating graphic and some interesting CSS experiments that can be done.

In the first example CSS experiment with repeating backgrounds, we have a two tone graphic Green and Red graphic box with a green and red block. We’ve set the graphic to repeat in all directions through our CSS styles. Because the graphic is repeated evenly across and down, the effect becomes stripes.

When working with repeating graphics within their own division, using the non-repeating space (spacebar or  , the container for the background image takes on the characteristics of what the space would normally look like in a sentence, reflecting the font-size, leading and kerning. Instead of using

<div style="background:url(something.gif) repeat"> &nbsp;</div>

you would use comments in place of the “space” such as

<div style="background: url(something.gif) repeat"> <!--comment --></div>

This eliminates the leading and kerning restrictions and the container would then reflect only the sizes set by the height and width such as

<div style="height:50px; width:10px; background: url(something.gif) repeat"><!--comment --></div>.

Let’s see what we can do with these CSS experiments in repeating backgrounds.

In this example, I’ve taken the two tone color background graphic and set it to repeat, which it does, going down in rows.

 
 

In the next example using the same two tone graphic, I constrain the repeat to just the top of the container, creating a row of small boxes visually.

Let’s repeat the same graphic but only across the top of the container.
 
Let’s repeat the same graphic but across the side of the container, adjusting the padding accordingly.
 

The example above had the background image on the left side and repeating along the Y axis, which took it down the side of the container looking like a border. In the next set of examples, I used two sets of two tone graphics, one red/green and one blue/yellow using the same technique, with each graphic set in their own DIV and set with repeating options.

 
 

Since we are experimenting with our CSS experiments, let’s set two division containers inside of this one, with one featuring the green-red graphic and the other the blue-yellow graphic repeating vertically. Let’s set the float to left on both of the two repeating background image graphics. Because these graphics aren’t on the screen or even “in” the container, they have no size specifications. We’d added a width of 40px and a height of 10px so the two graphics have some shape.

 
 
 

We’ve now given a height of 100px and width of 40px to the two different graphics. Now, each of these background images are sitting in the background of the graphic in their own containers.

 
 
 

By adding a margin between the two repeating backgrounds, we’ve created space and two columns. What if we give each “column” its own height?

 
 
 

We’ve now given the red-green graphic a height of 50% and the blue-yellow graphic a height of 80% of the container.

 
 
 

Let’s go back to them both being the same height, but now let’s move the CSS background images to float to the left and right of the text and add some width to the container to see how this looks. The text wraps through the middle of the background images and then stretches out below.

 
 
 
 

Suddenly we have some new effects going on as these three repeating CSS background images and their containers set to float left, creating a stair step pattern with the text content flowing down the increments.

 
 
 
 

We set the float to the right and the look changes as the text flows under each floated division containing a CSS background image. Remember, the height of the overall container must be set in order for the container with the background image to take shape within your CSS experiment container.

 

Ah, we’ve opened up the imagination with our CSS experiments. Now we can do a variety of things using the CSS background images as lines and bars of infinite width and height. This can lead to interesting graphic designs and even the formidable bar charts for measuring the many numbers found in research and business. You can find more information on layout out pure CSS charts at Web Page Design for Designers: Drawing with CSS (towards bottom of the page).

 
 
 
 
 

Wear a smile and have friends; wear a scowl and have wrinkles. What do we live for if not to make the world less difficult for each other?
George Eliot

 
 
 

Travel has a way of stretching the mind. The stretch comes not from travel’s immediate rewards, the inevitable myriad new sights, smells and sounds, but with the experiencing firsthand how others do differently what we have believed to be the right and only way.
Ralph Crawshaw

 

Creating bar charts is fairly easy following the examples we’ve set up, but there are a few little bugs that can break these designs. If the background image is set to go across and the width of the page is too narrow, the background image container will wrap down a line. In order for the float:left to work on the text in this example, we can’t use the white-space property to force the content onto one line. Hmmm, a challenge to work on later.

Top State Destinations for Overseas Travelers in 2003

New York : 4.1 Million
 
Florida: 4.1 Million
 
California: 4.0 Million
 
Hawaii: 2.0 Million
 
Nevada: 1.4 Million
 
Texas: 901 Thousand
 
 

In this example, similar to above, we’ve placed the repeat to begin at the top with the repeat filling the container. We also added a border with light and dark edges to create an inset look.

 
Top State Destinations for Overseas Travelers in 2003
Source: Travel Industry Association

 
New York
4.1 Million
 
Florida
4.1 Million
 
California
4.0 Million
 
Hawaii
2.0 Million
 
Nevada
1.4 Million
 
Texas
901,000
 

Placing the “bar graph” on its bottom was harder than thought. The trick is to set the top margin to be the height of the chart minus the height of the bar. If the chart is 100px high and the bar is 80 px high, then set the top margin to 10px in order for the chart to be pushed down with an even bottom margin. Each bar needs its own top margin. For matching content below, its a game of right margins to match the width of each bar column’s graphic with the text width.

Top State Destinations for Overseas Travelers in 2003
Source: Travel Industry Association

 
 
 
 
 
 

New York
4.1 Million
Florida
4.1 Million
California
4.0 Million
Hawaii
2.0 Million
Nevada
1.4 Million
Texas
901,000
 

Using the above CSS experiment techniques, we can create other interesting effects with CSS background images. Ever wanted a background that had a fading effect? A large background image, even one with a gradient fade, can have a large file size. Optimizing and streamling your web page design code and design size is critical to a fast loading web page. Instead of using a large background image, you can use a small image and set it to repeat.

Vertical 4px wide green fade background imageIn the next two CSS experiments examples, we’ve used two narrow graphics exactly the same. One is horizontal and the other is veritcal. They have a measurement of 4px by 200px and each have a file size of about 1300 bytes, tiny images which allow you a wide range of fun background designs you can play with. These are just a couple examples of the possibilities with background images.

4px wide green faded background image horizontal

 
… the immense variety that nature creates emerges from the working and reworking of only a few formal themes. Those limitations on nature bring harmony and beauty to the natural world.
Peter Stevens, Patterns in Nature
 
Chance is always powerful. Let your hook be always cast; in the pool where you least expect it, there will be fish.
Ovid
So I stop and wonder if chance is the reason for the brilliant photography captured by the pros, or is it skill, ability, and experience that makes the chance happen? The “F8 and be there” theory holds more water in my estimation. Combined with skill, ability, and experience, chance improves.

Well, I hope it does.

One Comment

  • Uma Shankari
    Posted September 7, 2006 at 2:43 | Permalink

    Most wonderful tips & ideas. Thank you!!

One Trackback

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>