Using multiple background images with CSS3 gradations

Creating the gradient image

Follow the instructions below to create your own image using Photoshop (or similar program) or use one of the resources listed.

  1. Create a new document with a width of 10px and a height equal to your site's maximum height (use 900px if you aren't sure), in RGB color mode and 72 pixels per inch with transparent background.
  2. Set the foreground color to white.
  3. Set the gradation tool to change from white to transparent.
  4. Using the Gradation tool, draw a gradation line from top to bottom.
    • Constrain the line by holding the shift key down while drawing the line.
    • Change the opacity from 100% to 90% (or less if you prefer) so you can color the background with CSS later.
  5. File->Save the file as .psd so you can edit again later.
  6. File->Save for the Web.
    • Reduce the width to 1px or so, to reduce file size.
    • Choose .png for true transparancy.
      • Watch the file size; it may be too big to meet your requirements.
Super-Easy Blendy Backgrounds
Matthew O'Neill of A List Apart.
Cross-browser semi-transparent backgrounds
DaltonLP
Cross-Browser Variable Opacity with PNG: A Real Solution
by Michael Lovitt, A List Apart
Gradient Image Maker
Dynamic Drive

Create the CSS gradient

The Ultimate CSS Gradient Generator will be used to create the CSS for the gradient image.

  1. Click "import from image"
  2. Click "Choose file" to upload the image from your computer.
  3. Click "import"
    • The CSS box should update and the preview window should now display your gradient
  4. Check the "IE9 Support" box
  5. Copy the code to you style sheet
  6. Copy the conditional code for IE9 and place it in the <head> section of your header file
    • The class ".gradient" will need to be changed to match the decleration in your style sheet

The css code you copy, should look similar to the following:

background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(left,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 */

The IE9 conditional statement will be:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Add background graphics

On this example page, there is a background gradient and two images; one at the top right and one at the bottom right. With CSS 3, it is possible to have more than one image in the background of a single block, in addition to color gradients. The ordering graphics determines how they are layered.

  1. Add your graphic by using url()
    • The image we are adding is going to be osu.jpg
    • Add url(path/to/osu.jpg), before each decleration of background: in the code you copied from above
    • Result: background: url(osu.jpg), -webkit-linear-gradient(left, #606c88 0%,#3f4c6b 100%);
  2. The default behavior for backgrounds is to repeat, so this will need to be fixed with background-repeat
    • In this example, we want osu.jpg to not repeat. The gradient will still need to be repeated. The repeat option will follow the order of background where each background is seperated by a comma
    • Add background-repeat: no-repeat, repeat; below the filter: line to accomplish this
  3. The default behavior for backgrounds is to place them in the top left corner of the scrren. If you want your background graphic to be placed somewhere else, background-position will be used.
    • In this example, we want ous.jpg to be in the top right while keeping the gradient in the top left. background-position follows the order set by background where each value is seperated by a comma
    • Add background-position: top right, top left; below the background-repeat: to accomplish this.

The resulting definitions looks something like this:


    background: url(osu.jpg), url(logo.jpg), #761144; /* Old browsers */ 
    background: url(osu.jpg), url(logo.jpg), -moz-linear-gradient(top,  #761144 0%, #b66401 100%); /* FF3.6+ */ 
    background: url(osu.jpg), url(logo.jpg), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#761144), color-stop(100%,#b66401)); /* Chrome,Safari4+ */ 
    background: url(osu.jpg), url(logo.jpg), -webkit-linear-gradient(top,  #761144 0%,#b66401 100%); /* Chrome10+,Safari5.1+ */ 
    background: url(osu.jpg), url(logo.jpg), -o-linear-gradient(top,  #761144 0%,#b66401 100%); /* Opera 11.10+ */ 
    background: url(osu.jpg), url(logo.jpg), -ms-linear-gradient(top,  #761144 0%,#b66401 100%); /* IE10+ */ 
    background: url(osu.jpg), url(logo.jpg), linear-gradient(top,  #761144 0%,#b66401 100%); /* W3C */ 
    background-repeat: no-repeat, no-repeat; 
    background-position: top right, bottom right;