Background images can make a web site come alive! They can can communicate mood and meaning, they can be layered under content for interesting graphic effects, and they can create illusions of columns and curves. Imagination, combined with technical knowledge, can create some very rewarding background image results.
Background images can be applied to virtually any HTML tag. This can produce intriguing visuals.
For example, the Zen Garden design,
'Ballade
,'
uses background images in the H1 tags to create 'paths' that lead from one section of the document to the next.
In terms of the box model, 'background' refers to the background of the content
+ padding areas. Keep this in mind when setting the position of a background
image. Revisit
Jon Hicks' Box Model Diagram
to see how the background color and image are layered in an element box.
Background Properties
First we will review the background property details. There are five background properties:
background-color:color;background-image:URI | none;background-attachment:scroll | fixed;background-repeat:repeat | repeat-x | repeat-y | no-repeat;background-position:x% y% | xpos ypos | keywords
...and one background shorthand property:
background:color URI attachment repeat x y;
The background shorthand property allows you to specify either the color or URI alone or the URI in combination with any of the other properties including the color.
The background image on the right has been attached to a DIV which I've given the ID of "backgroundDemo". I have wrapped the backgroundDemo DIV around the text under the 'Background Properties' heading on this page. Here is how the CSS rule for this background image looks when each background property is written out individually:
#backgroundDemo {
background-color: transparent;
background-image: url(images/bgCorner.gif);
background-repeat: no-repeat;
background-position: 100% 0;
}
Here is what the same CSS rule looks like when the shorthand property is used:
#backgroundDemo {
background: transparent url(images/bgCorner.gif) no-repeat 100% 0;
}
Since the background-attachment default property is scroll, and I want the image to scroll with the page, I do not need to include this property in the rule.
The background-color Property
We have already been using the background-color property from the beginning of this class. The W3C recommends that when setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. While this is a good rule of thumb it cannot always be followed when special effects are being achieved by layering the background images of overlapping elements.
The background-position Property
The background-position property can be set using x and y percentage values, standard CSS length units of measure, or keywords.
background-position:
Keywords
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
When percentage positioning values are used, the percentage will match the
same position on the image as in the containing block's padding area. E.g., with a value
pair of 0% 0%, the upper left corner of the image is aligned with the upper
left corner of the containing block's padding edge. A value pair of 100% 100% places
the lower right corner of the image in the lower right corner of padding area. With
a value pair of 33% 25%, the point 33% across and 25% down the image is
placed at the point 33% across and 25% down the padding area of the containing block.
The white dot in the diagram below shows how these coordinates intersect and the resultant
positioning of the image.
When numerical positioning values are used, such as 5em 2em,
the upper left corner of the image is placed 5 ems to the right and 2 ems down from
the top left corner of the containing block's padding area.
Here are a few key points about the background-position property:
- Positioning background images using percentage values has a different result than using standard CSS length values such as ems, pixels, inches, etc.
- Negative position values are allowed.
- Combinations of length and percentage values are allowed, (e.g.,
50% 20px). - Keywords cannot be combined with percentage or length values.
- If the background image attachment property is fixed, then the image is positioned relative to the edges of the viewport.
Full Screen Background Image Demonstration
I have attached a separate demonstration page which illustrates using a background image in conjunction with absolute positioning, z-index, and overflow (addressed later in this lecture). This is the kind of application that makes using CSS so rewarding once we have a good grasp of the basics.Resources
- Digital Web - Borders and Backgrounds
- Eric Meyer's - Punch Box Background
- Eric Meyer's - Curvelicious Background