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.
Click here to view code image
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()
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
Click here to view code image
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