HTML and CSS Reference
In-Depth Information
All the properties are prefixed with the token background- .The following example
demonstrates using the repeat property and the size property. It specifies that the image
should be smaller and repeat. This example specifies to repeat continuously, both horizontally
and vertically. However, you can specify repeat-x or repeat-y to repeat only in the specified
direction.
p {
background-image: url('orange.jpg');
background-size: 20px;
background-repeat: repeat;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
This previous code produces the output in Figure 4-18.
FIGURE 4-18 The use of the size and repeat properties for a background image
Applying gradients
A gradient effect changes the color of an object gradually from one spectrum to another.
There are two types of gradient effects supported. The first is a linear gradient where the
color changes in a line across the object in any direction. The other gradient is a radial
gradient where the color starts in the center and changes toward the outer edges. The
gradient can be applied to the background of the element in the following way:
background:linear-gradient(black,gray);
The linear-gradient function takes a few parameters. The parameters are outlined in
Table 4-4.
 
Search WWH ::




Custom Search