Grow your CSS skills. Land your dream job.

Multiple Backgrounds: Left Half and Right Half

Published by Chris Coyier

leftandright.jpg

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!)

Comments

  1. Permalink to comment#

    With moitor 1280×1024 there is a problem.

    http://farm4.static.flickr.com/3169/2384472443_bbf251138b_o.gif

    PS: sorry my English language

  2. Permalink to comment#

    its just the image thats wrong, DAG. not the code ;)

  3. Permalink to comment#

    Right ;)
    The problem is in the repetition of the image.

    PS: I have registered for the forum. Compliments.

  4. we achieved something very similar on the cssoff homepage. Take a peek.

  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.

  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)

  7. This CSS trick does not work under IE6. I think it requires a JavaScript fix to display on 100% body height.

    Best regards

  8. Alex
    Permalink to comment#

    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)

  9. Bryan
    Permalink to comment#

    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%;
    }

  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.

  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

  12. johnathan
    Permalink to comment#

    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

  13. johnathan
    Permalink to comment#

    “The trick to this…” – sorry

  14. Eric
    Permalink to comment#

    How would you allow this to scale for smaller screens like an i pad without cutting into the left image? So, both would keep their proportion and scale up and down accordingly?

    • Eric
      Permalink to comment#

      Figured it out:

      body {
      background: url(‘left.jpg’), url(‘right.jpg’);
      background-position: top left, top right;
      background-repeat: no-repeat, no-repeat;
      background-size: 50%, 50%;
      }

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".