HTML and CSS Reference
In-Depth Information
Lesson 7.
Setting Backgrounds & Gradients
Backgrounds have a significant impact on the design of a website. They help create a site's
look and feel, establish groupings, and assign priority, and they have a considerable influen-
ce on a website's usability.
Within CSS, element backgrounds can be a solid color, an image, a gradient, or a combina-
tion of these. As we decide how to implement these backgrounds, we should keep in mind
that every background contributes to the overall appearance of our website.
In this lesson we're going to take a look at how to assign different types of backgrounds,
including gradients, to elements; we'll also play around with a handful of CSS3 properties
specific to backgrounds.
Adding a Background Color
The quickest way to add a background to an element is to add a single-color background
using the
background
or
background-color
property. The
background
property
accepts colors and images in shorthand form, while the
background-color
property is
used strictly for setting solid background colors. Either property will work, and which one
you decide to use depends on your preference as well as the case for which you're using it.
1.
div {
2.
background-color: #b2b2b2;
3.
}
When adding a background color, we have a few options for the values we can use. As with
other color values, we can pick from keywords, hexadecimal codes, and RGB, RGBa, HSL,
and HSLa values. Most commonly we'll see hexadecimal values; however, we may occa-
sionally want to use RGBa or HSLa values for transparencies.
Search WWH ::
Custom Search