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!

No related posts.

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 2012. Ryan Stemkoski. All rights reserved | Technorati Profile

• Home
• About Ryan Stemkoski
• About Zipline Interactive