Achieving Double Background Effect with CSS
Tags: Beginner
Recently I was put into a situation where one of my client’s liquid layout site was in need of a redesign going back to a fixed/center aligned layout. The site’s layout and design was not designed to be centered aligned and so when implementing the design in code, I ran into some issues trying to achieve the same look and feel.
Final Preview
Do we sacrifice the design for implementation boundaries?
Typically when creating a stretch effect with CSS backgrounds, we would take a fixed width of the background and repeat it on the X-axis until it fills the page. Of course to achieve this effect, the center aligned header image would have to match the repeating background on both ends.
Typical Stretch Technique
In our scenario, we would need a repeating background to accommodate for the left side and the right side of the header. How do we achieve this effect?
Double Background Stretch Technique
Well we all know our current CSS version cannot handle double backgrounds. Hopefully in the future this will be available so we don’t have to pull these work-a-rounds.
The Double Background Effect
The solution is to use two repeating images, one for the left-side background, and another for the right-side background.
HTML
For the left-side repeating image, we will add a background to the body tag. Then, to accomodate the right-side repeating image, we will add an additional <div> tag, which will contain the second background.
<div id="bg_wrap"></div> <!--Right-Side Repeating Background Image--> <div class="container"> <!-- Container Class to center align and have a fixed width / The image header.gif is just as an example for placement --> <img src="header.gif" alt="" /> </div>
CSS
body {}
For the left-side repeating image, we apply the background to our body tag.
body {
margin: 0;
padding: 0;
background: #e5e5e5 url(bg_body.gif) repeat-x;
position: relative;
}
#bg_wrap {}
Then we will create the other half by adding an absolution position that will stick to the right.
#bg_wrap {
height: 96px;
width: 50%;
right: 0;
background: url(bg_wrap.gif) repeat-x;
position: absolute;
}
.container
This class will be the container of your contents, it will contain the width, background color, center alignment, and the position set to ‘relative’.
.container {
width: 960px;
background: #e5e5e5;
margin: 0 auto;
overflow: hidden;
position: relative;
}
Final Output
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Double Backgrounds with CSS - CSS/XHTML Tutorial by Soh Tanaka</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e5e5e5 url(bg_body.gif) repeat-x;
position: relative;
}
#bg_wrap {
height: 96px;
width: 50%;
right: 0;
background: url(bg_wrap.gif) repeat-x;
position: absolute;
}
.container {
width: 960px;
background: #e5e5e5;
margin: 0 auto;
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<div id="bg_wrap"></div>
<div class="container">
<img src="header.gif" alt="" />
</div>
</body>
</html>
Conclusion
Some may say that the additional empty div tag is not good semantics coding. Which I agree, it has no meaning to the content of our website. But I feel it can be appropriate to add one single line of html so that we don’t have to sacrifice our design to fit our implementation roadblocks and boundaries. If you have any questions, comments, or have a better solution I would love to hear your thoughts!
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment40 Peeps Have Spoken Their Minds...
This is nothing innovative and also it needs the extra div which does not make it very semantic.
What I generally do is create a big image (2400 pixels wide if it has to be repeated horizontally so nobody nearly will view parts without the bagkground) then I set it as the background (generally with position center)
Probably it’s the best solution when the image is a light gif or png
Hi there, thanks for the post. Would the same effect work if instead of using an empty div, you added a style to the HTML tag?
Great article. This will undoubtedly come in handy down the road. Sometimes there’s nothing else you can do and semantics take the hit with the extra empty div.
Sweet technique – thanks for the tip! I always struggle with the easiest way to do this, I’ll be referencing this page next time it comes up.
Nice looking blog!
For the main (centered) image in your example you could enclose it in a header tag and add alt text so that it’s accessible and SEO-friendly.
Or you could use the main image as a background for a header tag and include header text that is positioned off-screen ( text-align:-9999px).
For the typical strech scenario, why wouldn’t you just absolute position the image within the 100% wide div. In the css, you can apply the repeat-x background image with no margins or borders and then the image will line up appropriately. You won’t need to divs on either side and you’ll save your semantic markup.
<div id="header">
<img class="headImg" src="header.gif" alt="" />
</div>
#header{
background: url(bg_wrap.gif) repeat-x;
margin:0;
padding:0;
height:195px;
}
.headImg{
margin:0 auto;
padding:0;
}
Very useful method. You may combine several various background wrappers (in various places, don’t forget
position: relative;on containers) to get exciting effect on site ;)Sorry for my poor English.
Thanks to all for the feed back and ideas~
Jeff Mackey:
I did read some articles with achieving the same effect adding the properties on html and the body class, but I have not tested those out yet. I’ll be sure to give it a try :-)
dougwig:
Good Point!~ In this example I didn’t want to stray away from the technique behind double backgrounds (I left it as simple as I could), because we all know, getting into SEO can be a juicy topic on its own ;-) Thanks for the reminder though, I’m sure other readers can benefit from what you brought up~
Martin:
I chose to add one line of html over adding a giant header image because this seemed to be the logical choice for efficiency~ Although I am pretty anal about semantics, I typically like to balance what is reasonable and what is not.
In this scenario, I felt bending the rules for semantics was a more efficient idea. we all have our styles and techniques though, so I def do appreciate you sharing yours :-) Thanks!
Tarandon:
Maybe I’m misunderstanding something but it seems that snipped of code will only allow one background?
Nice site. I took a look at your demo in FF2 and it’s breaking.
Looks like the z-index:-1 is causing trouble for div#bg_wrap.
Nice technique. I have come across this situation before and never had a great solution, thanks for the article.
Garrick,
Thanks so much for catching that! I just ran firefox2 and had to debug. It works now but the css has been adjusted a tiny bit. I no longer use a z-index, and added a relative positioning to the container class~
Thanks!!
How do you deal with IE 7 when it’s zoomed? (Backgrounds on BODY stay the same size.)
David, I’m not sure if that can be avoided (please correct me if I’m wrong) but all body backgrounds does not seem to resize for me in IE7~
You are right. But that’s my point – the background on BODY does not resize, but any background on content does. So they get out of alignment.
How do you deal with that?
Can’t you just use the same technique by just adding another empty div (with the left background and align to the left 50%)?
As a personal preference, I use the body tag in spite of the IE7 zoom. The zoom causes discrepancies in a number of areas such as pixelated images, site layout, and, as you point, the body tag background.
However, as a solution, you could go with what Len suggested and instead of using the body tag for the background, create another empty div. Maybe something like the following:
body { margin: 0; padding: 0; background: #e5e5e5; position: relative; } #bg_wrap { height: 96px; width: 50%; right: 0; background: url(bg_wrap.gif) repeat-x; position: absolute; } #left_bg_wrap { height: 96px; width: 50%; position: absolute; background: #e5e5e5 url(bg_body.gif) repeat-x; } .container { width: 960px; background: #e5e5e5; margin: 0 auto; overflow: hidden; position: relative; } <div id="left_bg_wrap"></div> <div id="bg_wrap"></div> <div class="container"> <img src="header.gif" alt=""> </div>Very good article. I will definitely try this in my next projects. Thank you.
nice work
Why we are using two background and an extra div, can we use one background for body
Thanks for this, a very handy technique to have in the locker! It is actually something I have thought about before but didn’t know how to go about achieving it. I agree that it’s not great to have an empty div tag placed within the HTML, but for the effect that it achieves more than makes up for it I feel.
I think it’s a great solution that in the past I’ve solved using 2 extra divs, instead of just one and the body tag. As far as the zoom problem in IE7, my opinion is that it is something users have to deal with if they use the zoom feature. That’s like expecting you to get a site to look exactly the same in IE6 that it does in FF3. Sure it can be done, but the extra work isn’t worth it.
A broken background image when zoomed won’t cause a user to leave your site if the content is good.
Really cool…….i have never thought it would exist…instead using this i left aligned the whole site….i should have thought it could happen..nice put up!
This is a great site and i think you’re doing a great job with showing techniques. I decided to take a web design class and this is really helpful. My only problem is that i need to find images that are open to the public, aka i’m not allowed to steal :-/. In any case, i was wondering if you know of any sites that provide free images…
nice work
@Martin: doh! you really choose to waste bandwith over being “less semantic”?
Clever technique. This kind of stuff is what makes CSS fun.
Hi !
Instead of :
I’ll use something like :
in order to give one bg to the .container and another to h1, so we don’t really need empty non-semantic div.
I really believe the semantics question is going to come about lots on this and I would say that css4 will be interesting if mixed with jS/jquery libraries. The problem we’re facing is that browsers aren’t future proof enuff yet and relying on users to upgrade isn’t going to be the answer.
:) otherwise nice article!
Nice work! Very useful.
P.S. I like your website’s design. Very sharp.
Thank you so much for this article. Solved a problem I had, but I put it on myself.
I designed this background thinking it was cool. After the client loved it I went to chop it up. Then I realized the left and right side did not match. DOH!
This saved my night. Thanks!
Great site design as well. It gave me inspiration for another project I did. I like how it funnels into the blue. It really draws the eye. The footer is fantastic as well.
Cheers
I’m glad you guys are finding it useful! Thanks for the feedback! :-)
Since bg_wrap is absolutely positioned, it can be place at the bottom of the HTML and top:0; used to bring it back to the top. This way the site content does not get shoved farther down in the HTML. This is much more search engine friendly.
James, great idea! :-) Great site by the way, I like how you used your backgrounds.
Excellent : thanks for this post !
I’m having a bit of trouble… When I put the CSS code in a separate CSS file, the two backgrounds do not show up. But when I it in the document itself, it works. Is there any way to fix this? It’s a bit confusing…
I used to rip my hair out over this stuff, then opted for larger graphics and finally, I just use WordPress now but this site is awesome and it inspires me to work toward better design- a long road for me. Do ya’ give lessons? Seriously, it looks like you share a lot on this site. I’ll be visiting frequently.
This topic really helped me out with a curved header design. Thank u very much!
Thanks I was looking solution for animation background by css, your example is good too. Do you know any solution how to animate background in css?
Very Good !!
Extremely helpful and stunning effect. Thanks a lot for sharing!
Speak Your Mind...