Two CSS Background Images on a Single Website

Over the years I have tried several times to find a stable way to add two backgrounds to a site. It may be that I want a horizontal background that may have a gradient and a vertical background that is 100% tall and adds a slight shadow to the edges of the site.

This is not an easy effect to create. Only Safari can support multiple background images in a single element. Why? I have no idea, it would be fantastic if you could easily blend multiple images, there is so many cool things you could do with less code. Anyway, I found an article on Sitepoint that talks about styling the html and body elements and I realized two background images could be done via that method. (http://www.sitepoint.com/blogs/2009/02/11/styling-the-html-and-body-elements/) The strategy they outline is actually something I have tried in the past and was uncessful but I probably did something wrong, not realizing it was me and not the element I was styling.

I haven’t tried this yet, but their strategy is to style the html tag with one background image and the body with the other. This should allow you to create dual effects. I don’t know how it will render in all browsers but I am excited to try it out.

Here is their code that can create a single fixed column 100% high.

html {
  background-color: #333;
}
body {
  background-color: #fff;
  width: 750px;
  margin: 0 auto;
}

You can style the columns however you want. Both could be a 100% wide with repeating background images etc. I will include more examples once I have fully tested this technique for cross browser compatibility. If you try it out let me know how it works!

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

html {
	overflow-y: scroll;
	background: #5f5f5f url('images/layout/html_bg.png') repeat-x scroll;
}
 
body {
	margin: 0px;
	padding: 0px 0px 20px;
	width: 100%
	min-height: 100%;
	font-family: "Lucida Grande", "Helvetica", "Verdana", "sans-serif";
	font-size: 11px;
        background: transparent url('images/backgrounds/home_bg.jpg') no-repeat center top;
}

Created by: Zipline Interactive
Copyright 2010. Ryan Stemkoski. All rights reserved | Technorati Profile

• Home
• About Ryan Stemkoski
• About Zipline Interactive