The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

background challenge

  • # April 3, 2008 at 4:13 am

    This reply has been reported for inappropriate content.

    I like the idea and although that one pixel bug till now, it’s cool to see the process of development here and that everyone helps eachother :)

    # March 26, 2009 at 7:19 am

    Hi folks,

    Do you have any idea, why those divs (left and right) covers all the content?

    Thanks in advance for help,

    # March 26, 2009 at 7:59 am

    This reply has been reported for inappropriate content.

    #leftHalf width = 50%

    #rightHalf width = 50%

    Both halves height = 100%

    So it’s 100% height and 50% + 50% = 100% width

    # May 13, 2009 at 12:00 pm

    There is actually a fairly simple solution to placing content over the backgrounds. I’ve produced this and tested it in the following browsers successfully:

    PC: ie6, ie7, FF3, Opera, Chrome
    MAC: ff, safari

    Basically you add another div to the page and set it to position absolute, set it’s width and height to 100% and reset the co-ordinates to 0,0. This re-creates the body so that any html there in uses the top left corner of the browser window as an anchor. Place your content in this div and you’re set. In the screen shot below the white represents a div of content that is centered in the middle of the page.


    Here is the code for the page, note the addition of the "wrapper" divs in the css and body:

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

    Split Background Pattern by CSS-Tricks

    Pierre Lemoine

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed