JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Changing the Background

The background refers not to the background of the entire page, but to the background of a particular element. In other words, you can change the background of any elementincluding images, form elements, and tables.

To use a background image:

1.
Type background-image:

2.
Then type url(image.gif), where image.gif is the name of the image that should be used for the background, or none to use no image at all (Figure 11.5).

Figure 11.5. First, we apply a background image to the outermost division, the wrap div. Then we position the image in the left, top corner of the wrap div and repeat it in both directions.


To repeat a background image:

Type background-repeat: direction, where direction is either repeat (to tile the image both horizontally and vertically), repeat-x (to tile the image horizontally), repeat-y (to tile the image vertically), or no-repeat (to not tile the image at all) (Figure 11.5).

To control whether the background image is attached or not:

1.
Type background-attachment:.

2.
Then type fixed to stick the background image to the browser window or scroll to let it move when the visitor scrolls.

To specify the position of an element's background image:

Type background-position: x y, where x and y can be expressed as a percentage or as an absolute distance. Or use values of left, center, or right for x and top, center, or bottom for y (Figure 11.5).

To change the background color:

1.
Type background-color:

2.
Type transparent (to let the parent element's background show through) or color, where color is a color name or rgb color (see page 126 and the inside back cover) (Figures 11.8, 11.9, and 11.10).

Figure 11.8. The background for the screen div will make the text legible. Its color is temporary. Next, we add a background to links when they're hovered over, in order to make it clear that they really are links. Finally, we'll add a background color to the monthly opinion column in the sidebar div.


Figure 11.9. The screen div's background completely covers our new background image from the preceding page. We'll remedy that shortly (with padding, on page 177). Notice how the links that are not being hovered over share the same background as the screen, while the hovered resources link has a higher contrast background to show it off.


Figure 11.10. The background color for the sidebar is the lightest shade of blue I could manage. Just enough to set it off.


To change all the background properties at once:

1.
Type background:

2.
Specify any of the accepted background property values (as described on the preceding page), in any order (Figures 11.6 and 11.7).

Figure 11.6. You can use the shortcut background property described on the next page to apply more than one background related property at once.


Figure 11.7. Setting a background image for your page is always a dangerous mission. On the next page, we'll cover up the background so that the text is once again legible. Later on, we'll peel back the cover to let some of the background peek through.


Tips

  • The default for background-color is transparent. The default for background-image is none. The default for background-repeat is repeat. The default for background-attachment is scroll. The default for background-position is top left.

  • When using the background shortcut property (above), you needn't specify all of the properties. But beware that any non-specified properties are set to their defaults (and thus may override earlier style rules).

  • The background properties are not inherited.You only need to explicitly set default values like TRansparent or scroll when you want to override another style rule.

  • If you use the background-position property with a repeat, the position specifies where the first image in the repeat starts, e.g., from the top right.

  • To create a background for the entire page, set the background property for the body element.

  • If you specify both a color and a URL for the background, the color will be used until the URL is loaded, and will be seen through any transparent portions of the background image.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→