HTML and CSS Reference
In-Depth Information
Transparent Backgrounds
When using an RGBa or HSLa value as a transparent background color, it's a
good idea to provide a fallback color, too, because not all browsers recognize
RGBa or HSLa values. And when a browser comes across a value it doesn't re-
cognize, it will ignore it.
Fortunately, there is an easy way to provide a fallback background. CSS cascades
from the top of a file to the bottom of a file; thus, we can use two
background-color
properties within a single rule set. The first
background-color
property will use a “safe” background color, such as a
hexadecimal value, and the second
background-color
property will use an
RGBa or HSLa value. Here, if a browser understands the RGBa or HSLa value it
will render it, and if it doesn't, it will fall back to the hexadecimal value above it.
1.
div {
2.
background-color: #b2b2b2;
3.
background-color: rgba(0, 0, 0, .3);
4.
}
Adding a Background Image
Besides adding a background color to an element, we can also add a background image.
Background images work similarly to background colors; however, they offer a few addi-
tional properties to finesse the images. As before, we can use the
background
property
with a shorthand value, or we can use the
background-image
property outright. No
matter which property we use, there must be an image source identified using a
url()
function.
The
url()
function value will be the background image's path, and the familiar rules for
creating hyperlink paths apply here. Keep an eye out for different directories, and be sure
to show exactly where the image resides. The path will be placed inside parentheses and
quoted.
1.
div {
2.
background-image: url("alert.png");
3.
}
Adding a background image solely using a
url
value can provide undesirable results,
as by default the background image will repeat horizontally and vertically from the top
Search WWH ::
Custom Search