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.
Here are a few references, i used:
- http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ – nice write up from NICOLAS GALLAGHER.
- and this tutorial really helped a lot too: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
- http://www.colorsontheweb.com/colorwizard.asp is really useful to me when i need a complete color scheme. You can hit the RANDOMIZE button or enter your hex code or a proposed base color. Nice.
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.
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:
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
|This glossybackground.png image is the default tile for browsers that cannot support HTML5 effects.|
|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.|
|This xperimental.png image is also a transparent ping image format set 1 pixel from the left and top borders with no repeat.|
|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.|
|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.|
|This image is called computer.gif displayed as a transparent image.|
|This blue1.png image dredged up from old archive. Rounded corners are visible courtesy of the ping format.|
|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.|
|This image was not used in this test. You may want to play with it in your tests. backgroundbar2.png|
|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 🙂