CSS Background (Cont.)
Background Image—Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
body { background-image:url('gradient2.png'); }
If the image is repeated only horizontally (repeat-x), the background will look better:
body { background-image:url('gradient2.png');
background-repeat:repeat-x; }
Background Image—Set position and no-repeat
When using a background image, use one that does not disturb the text.
The background-repeat property is to show the image only once:
body { background-image:url('img_tree.png');
background-repeat:no-repeat; }
In the example above, the background image is shown in the same place as the text.
To change the position of the image, the position of the image is specified by the background-position property:
body { background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right; }
Background—Shorthand Property
From the examples above, there are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property.
This is called a shorthand property.
The shorthand property for background is simply background:
body { background:#ffffff url('img_tree.png')
no-repeat top right; }
Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web: