Multiple CSS3 Backgrounds with Fallback

This Friday lesson will be fairly simple for everyone. Most of us will be very familiar with the CSS background attribute and applying a color, image, or pattern to it. We can use new techniques to help leverage our current knowledge and extend our website further. The old CSS normally looks something like this:

Pre CSS3

1
    background:#001122;

With the wonderful help of CSS3, we can now apply multiple backgrounds to areas on our page. This gives us more flexibility than before by using inherit css techniques rather than attempting to apply a large images to the area which doesn’t scale well nor does it make us happy with the large load time hurting our users and SEO effort.

Here is a great image example from CSS-Tricks.

”CSS-Tricks”

Old Way – boring!

1
2
3
4
body {
    background:
    background-color: #2f2626;
}

New Way with fall back

1
2
3
4
5
6
7
8
body {
    background:
        url(../images/top-right.png) top right fixed no-repeat,
        url(../images/top-left.png) top left fixed no-repeat,
        url(../images/bot-left.png) bottom left fixed no-repeat,
        url(../images/bot-right.png) bottom right fixed no-repeat;
    background-color: #2f2626;
}

It requires very little extra effort and you can get a much cooler CSS3 background for your page. You can even couple this with doing gradients or a radial effect to avoid images all together.

1
2
3
4
5
6
7
8
9
body {
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
}

Understand how to define a gradient with CSS can be very confusing for someone not doing it everyday. I personally Google – CSS 3 gradient generator. This way I can have a little help for my brain so early in the morning. There are plenty of tools you can use and you can even put forth the effort to learn this if you want to.