HTML5 Multiple Background Images

Wanted to explore this aspect of the HTML5 specification. Will try to remember to post my links here to other resources, but for the mo. i’ll say that some but not all of the most recent browsers will permit HTML5 attributes, one of which includes multiple images for the web page background. I use Firefox 8.0 beta, Safari 5.0 and Google Chrome 14.0 for testing. My wife will rarely let me on her windows 7 system to test as she is always blogging, but that’s another story 🙂

The basic premise of this post is that the background of any web page we construct using html, is simply a back drop to the material to be presented. We can stack several layers, each with one or more images. These image layers are stacked from front to back, where the first image is closest to the viewer (but still behind the ‘payload’) and the final image is at the very back of the stack, the one we could really say is the ‘true’ background. It might not really be an image, it might just be a color filled layer. I’ll show you the CSS3 code for this later. Remember that this whole idea is useless, unless some part of a layer has a clear bit, so we can see the layer(s) below/behind it. This is known as transparency. For now have a read on some of these links i just found to be useful.

For a screen shot of what my test looked like, see this.

Browser showing several images used to construct a complex background
Browser showing several images used to construct a complex background

Here are a few references, i used:

If you click on the image above, you can see a bigger version with more detail. Yes, i know it looks poo, but i’m a developer, not a designer, so i just try to sort out the technical bits while i leave the design side to cool dudes and dutchesses.

<style type="text/css">
body
{ min-width: 900px;
background-color:yellow;
background: url(images/glossybackground.png) 0 0 repeat;
background: url(images/xperimental5h.png) 144px 310px no-repeat,
url(images/Xperimental.png) 1px 1px no-repeat,
url(images/matrix.png) 144px 500px no-repeat,
url(images/MacOSXR.jpg) center right no-repeat,
url(images/computer.gif) 100% 0 no-repeat,
url(images/blue1.png) center bottom no-repeat,
url(images/bgchit.png) fixed repeat;
}
</style>

The stylesheet for this background panel appears above. Several defaults are included just in case a user’s browser is not capable of showing HTML5 effects. Note that all images are located in the /images sub folder where the html page is. Here are a few points of interest:

  1. background-color:yellow; is declared as a final default value for the web page background color if no images can be found or image display is turned off in the browser
  2. background: url(images/glossybackground.png) 0 0 repeat; // used for browsers that cannot support the HTML5 specification and the multi-image declaration that follows is ignored.
  3. background: // a stack of images that together form the composite background. The first image is closest to the viewer, so xperimental5h.png is closer than, or higher up the stacking order than Xperimental.png. Commas separate each image declaration having it’s own repeating and offset positioning values.
  4. Note that most of these images use transparency to show/hide part/all of what’s on the layer behind it. The computer.gif  uses transparency as an aspect of the GIF89 specification. The ping formatted images, those with .png suffix can optionally have an alpha channel, that indicates opacity and transparency to the components on the layer below/behind.
  5. Two white boxes in this screenshot hold the web payload as part of the DOM body, and are not part of the page background. They use another aspect of CSS3 for opacity/transparency through the box and it’s text to the layer below. See the css code for div.transbox in the test.html sample at the bottom of this post. Notice the opacity of 0.75 allows us to view about 1/4 of the content below/behind the division box. That’s 1.0 minus 0.75 = 0.25 or 25% of the content behind is visible. A dithering process reveals pixels of the composite background behind/below this box.
  6. The CSS3 styles for these two white boxes is show in the sample at the bottom of this post. For now, look at the following examples of the images used in this test case. I’ve thrown in a few extras just in case, you want to play with them yourself.
  7. The CSS3 declaration for the ‘codebox’ division uses a border-radius to curve each corner by 15 pixels, though this specification may not work on all browsers.
  8. The CSS3 declaration for the ‘codebox’ division uses a drop shadow on the boxes when they are displayed on web-kit based browsers like Safari. Read this for more info.
  9. In CSS3, each of the four sides of a box border do not need to be the same color. In the example below, a declaration such as "border-top-color: #ccffdd;" allows only the top edge of the box border to be different, kind of a aqua/blue.

an 80x81px tile for a heavy-metal theme
This glossybackground.png image is the default tile for browsers that cannot support HTML5 effects.

A png image with transparency from photoshop tool.
A png image with transparency from photoshop tool.
This xperimental5h.png image is a transparent .png which is positioned 144 pixels from the left border and 310 pixels from the top border as a single image, without repeating.

Used photoshop to generate this transparent title on a slant.
Used photoshop to generate this transparent title on a slant.
This xperimental.png image is also a transparent ping image format set 1 pixel from the left and top borders with no repeat.

This photoshop creation of the popular Matrix Reloaded image.
This photoshop creation of the popular Matrix Reloaded image.
This image is a transparent matrix.png which is positioned 144 pixels from the left border and 500 pixels from the top border as a single image, without repeating. Look here for a tutorial.

Loved this version of the perennial Mac OS logo.
Loved this version of the perennial Mac OS logo.
Was looking for something to dress up a website for Apple users and found this macosxr.jpg image, but dunno where it came from or how it was created. Sorry.

Artistic Impression of modern system
Artistic Impression of modern system
This image is called computer.gif displayed as a transparent image.

A transparent .png image of a blue button.
A transparent .png image of a blue button.
This blue1.png image dredged up from old archive. Rounded corners are visible courtesy of the ping format.

Repeatable tiling chit
Background Tile
This bgchit.png image repeats across and down the full web page window as the last layer of background – farthest back. 20×20 pixel size is more delicate than the glossybackground chit above.

A vertical repeating tile
A vertical repeating tile
This image was not used in this test. You may want to play with it in your tests. backgroundbar2.png

A photoshop experimental image
A photoshop experimental image
This xperimental3.png image was not used in this test. Just trying several tricks in photoshop to create more impressive backgrounds.

Ok, that’s what all the images look like, now you can try this idea out on your own system. If you do not see mutliple background images, try a different browser, the more recent build, the better. Oh, yes, you were thinking some html might be nice as a test… well copy the following into a folder as test.html or some such, then create an /images folder and ‘save image as’ for each of these images you see above. Good hunting 🙂


<html>
<head>
<style type="text/css">
body
{ min-width: 900px;
background-color:yellow;
background: url(images/glossybackground.png) 0 0 repeat;
background: url(images/xperimental5h.png) 144px 310px no-repeat,
url(images/Xperimental.png) 1px 1px no-repeat,
url(images/matrix.png) 144px 500px no-repeat,
url(images/MacOSXR.jpg) center right no-repeat,
url(images/computer.jpg) 100% 0 no-repeat,
url(images/blue1.png) center bottom no-repeat,
url(images/bgchit.png) fixed repeat;
}
div.codebox
{ font-size: 2;
width:1200px;
height:130px;
margin: 60px 130px;
padding: 0 0 0 10px;
border: 2px ridge #c00080; border-top-color: #ccffdd;
background-color: white;
opacity: 0.75;
border-radius: 15px;
-webkit-box-shadow: 4px 9px 3px #000;
}
div.transbox
{
width:600px;
height:180px;
margin: 100px 130px;
border: 2px ridge #c00080; border-top-color: #ccffdd;
background-color: white;
opacity: 0.75;
border-radius: 15px;
-webkit-box-shadow: 4px 9px 3px #000;
}
/* declare some margin room within the box */
div.transbox p
{
margin: 30px 40px;
}
</style>
</head>
<body>
<div class="transbox">
<p>Hello Dolly. It's so nice to see you back where you belong.</p>
<p>Declare a semi-transparent box over a part of the background and put a border on this div box. it's a ridge border which some browsers cannot support of 2px wide colored fuchsia, but since we declare a specific color for one of the sides, the top of the box is aqua</p></div>
<div class="codebox">
<pre><code>
background-color:yellow; /* this color will be seen if the browser does not support multiple images or the image is not available */
background: url(images/glossybackground.png) 0 0 repeat; /* used if browser does not support multiple background images below */
background: url(images/xperimental.jpg) 0 81px no-repeat, /* this is the top-most / front-most image */
url(images/computer.jpg) 100% 0 no-repeat, /* a transparent gif lays over the following lower images quite nicely in safari */
url(images/glossybackground.png) fixed repeat; /* this is the lowest image is at the back/bottom of the stack
</code></pre>
</div>
</body>
</html>

One thought on “HTML5 Multiple Background Images

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s