Grow your CSS skills. Land your dream job.

background challenge

  • # April 3, 2008 at 4:13 am

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

    hjr
    # 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,
    Martin

    # March 26, 2009 at 7:59 am

    #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.

    [img]http://www.neo-media.ca/bgsplit/bg-split.jpg[/img]

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

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Cheers,
    Pierre Lemoine

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

You must be logged in to reply to this topic.

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