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!