Multiple Backgrounds: Left Half and Right Half
The introduction of the brand-new CSS-Tricks forums the last few days has been great! It was worried it would take a while for it to catch on, but the last few days there have been about 150 posts in lots of great topics.
One of those great topics was John Steven’s background challenge:
I’m standing before a challenge and because to celebrate this new forum, I like to ask you to inspire me on this issue. We need a background 100% wide but what goes into a different pattern on 50% of the screen. The idea of making background image that is for example 2500px wide and repeat-y is not what I’m looking for.
My first thought was to create 2 divs, a leftHalf, and a rightHalf:
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}This works, but it has one “small” (literally) problem. When the browser window is at a width of an odd number of pixels, there is no even 50% split of that number and you get a tiny stripe of white down the middle in between the two divs.
John himself suggested the perfect tweak to this solution, which solves that. Instead of a leftHalf, just apply that background image to the entire body element. This solves the white stripe problem and uses less markup as well!
VIEW THE SOLUTION
(yes, the left half’s pattern doesn’t line up quite right, but it’s the theory here that counts!)
Loading ...
1
With moitor 1280×1024 there is a problem.
http://farm4.static.flickr.com/3169/2384472443_bbf251138b_o.gif
PS: sorry my English language
Comment by DAG — April 3, 2008 @ 6:13 am
2
its just the image thats wrong, DAG. not the code
Comment by V1 — April 3, 2008 @ 6:44 am
3
Right
The problem is in the repetition of the image.
PS: I have registered for the forum. Compliments.
Comment by DAG — April 3, 2008 @ 6:55 am
4
we achieved something very similar on the cssoff homepage. Take a peek.
Comment by JD Graffam — April 3, 2008 @ 5:42 pm
5
I just did pretty much the same thing but increased the left div to 60% and kept the right one at 50% with that one on top. so the left repeats under it.
what i am having a problem with however is no matter where i place the empty divs, or the css, i cant get any content to be on top. i spent some time trying different z-index values and nothing worked.
you dont have any content in your example so im wondering if you would have the same problem.
Comment by David Sparks — April 3, 2008 @ 9:54 pm
6
here’s my result after applying the left side to the body instead of an empty div:
http://digitalskraps.com/test/ctchallenge.html
when i apply a negative zIndex to the right div it goes under the body. when i apply any combination of zIndexs to the container and right div nothing changes. and my div even comes after the content.
(css is in the head)
Comment by David Sparks — April 3, 2008 @ 10:01 pm
7
This CSS trick does not work under IE6. I think it requires a JavaScript fix to display on 100% body height.
Best regards
Comment by Michal Popielnicki — April 4, 2008 @ 5:48 am
8
If anyone wants to use a copy of the image that repeats nicely, copy this http://209.98.250.109/css-tricks/splitbackground/bg-1.jpg (you could use it directly but I sure wouldn’t trust my internet connection… my network is a mess)
Comment by Alex — April 4, 2008 @ 7:01 am
9
Try this and you won’t need a div tag, just the HTML and Body tags:
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-position: left top;
}
html {
background-image: url(http://css-tricks.com/examples/SplitBackgroundPattern/images/bg-1.jpg);
width: 100%;
}
body {
background-image: url(http://css-tricks.com/examples/SplitBackgroundPattern/images/bg-2.jpg);
width: 50%;
}
Comment by Bryan — April 4, 2008 @ 10:28 am
10
Maybe you only need 1 div. Make the background in Body element the whole and repeating all the way. And on top of that make 50% right half div. This way you get no complication of any odd number of pixels width.
Comment by Boris — April 4, 2008 @ 1:47 pm
11
Problem with using two tone background image in css to create a on hover effect..etc is that when the user increases font size and its box pushes bigger, it reveals the other side of the image.
This could be worked around though if it was a gradient image and you background-positioned top with background color X on normal, then background-positioned bottom with background color Y on hover..etc
Comment by Chloe Edwards — April 5, 2008 @ 10:20 am
12
The trick to trick to this is in preparing the images. one of the images should have the horizontal repeat built into it. Half it’s width should also be transparent.
The affect can then be achieved with no extra html and no width restriction on the body/.
css (with slight hack due to min-height usage):
*{margin:0;padding:0;}
html{
background: url(bg-2.jpg) repeat ;
height:100%;}
body{
background: url(body_bg.gif) repeat-y top center;
min-height:100%;height:auto!important;
demo
Comment by johnathan — April 5, 2008 @ 1:40 pm
13
“The trick to this…” - sorry
Comment by johnathan — April 5, 2008 @ 1:42 pm