Making sense of CSS - Build Windows 8 Apps with HTML5 and JavaScript - page 57

Changing the background color
The background color of an HTML element plays an important role in HTML design, since it can be
used to achieve compelling effects. Each element can have its background painted with a solid color
or a gradient of colors. It can also have the background textured with a bitmap. Let's start with the
simplest scenario: using a solid color. Here's what you need:
.blue-button {
color: #ffffff; /* white */
background-color: #0000ff; /* blue */
}
The background-color property accepts a color expression.
Using gradients
To give an HTML element a gradient background, you set the background property with an expression
that describes the type of gradient you want. Here's how to create a linear vertical gradient that
begins with blue, ends with red, and has some white in the middle.
.blue-button {
color: #ffffff; /* white */
background: linear-gradient(to bottom, blue, white 80%, red);
}
In particular, the white appears towards the end of the gradient (80%) and the red takes the
remaining 20% of the background. The keyword bottom indicates the direction of the gradient.
Similarly, you can create a radial gradient by just using the radial-gradient function.
Using a background bitmap
There are several more properties to learn about if you intend to use a bitmap as the background of
the element. Consider the following example:
.img-button {
color: #ffffff; /* white */
background-image: url(/images/button-bkgnd.png);
background-repeat: no-repeat;
}
The background-image property allows you to link the image for the background. You do that via
the url function, as you can see in the example. If the image is too small for the background area, you
may decide to repeat it vertically and/or horizontally or to render it only once. You control this aspect
via the background-repeat property, with the values no-repeat , repeat-x (horizontal), and repeat-y
(vertical).