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 Unleashed – Experiments with CSS Designs
- CSS Book Recommendations
- CSS Experiments Playing With CSS Blocks
- CSS Experiments with CSS Logo Designs
- CSS Experiments with Background Images and Backgrounds
- CSS Experiments with Lists, Menus, Tables of Content, and More
- CSS Experiments – Web Fonts and Embedded Fonts
- CSS Unleashed – Experiments with Quotations, Pull-quotes and Blockquotes
- CSS Unleashed – Experiments Showcasing Your Photography
- CSS Experiments – Variations on a Theme
- CSS Experiments – How They Were Done and More
- CSS Experiments Putting It All Together
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"> <!--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.
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.
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.
Source: Travel Industry Association
4.1 Million
4.1 Million
4.0 Million
2.0 Million
1.4 Million
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.
Source: Travel Industry Association
4.1 Million
4.1 Million
4.0 Million
2.0 Million
1.4 Million
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.
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, 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.
Peter Stevens, Patterns in Nature
Ovid
Well, I hope it does.
One Comment