Web Design, CSS, and WordPress Taking Your Camera on the Road - CSS Unleashed - Experiments with Background Images and Backgrounds

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.

CSS Experiments

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 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">  </div>

you would use comments in place of the "space" such as

<div style="background: url(something.gif) repeat"> </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"></div>.

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

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.

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.

Suddenly we have some new effects going on as these three repeating 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 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 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

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

Source: Travel Industry Association

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

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 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.

In 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.

... 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.