Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS background image with two different patterns

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #32843
    lel
    Member

    I am creating a layout with a background image that has one pattern on approxiately 30% of the width and a second pattern on the remaining 70% of the background and I am attempting to come up with the best possible way to write the markup/css with the content area centered keeping in mind semantics and page load times.

    My first idea was to do something like this (note: my actual project uses percentages instead of pixel width, but I don’t think it matters.):







    content







    #wrapper {
    width: 100%;
    height: 100%;
    background: url(../images/bg-wrapper-rt.png) repeat 0% 0%;
    position: relative;
    }

    #wrapper-lt {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    left: 0;
    background: url(../images/bg-wrapper-lt.png) repeat 0% 0%;
    z-index: 5;
    }

    #container {
    width: 960px;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
    font-size: 1.2em;
    background: url(../images/bg-container.png) repeat-y 0% 0%;
    z-index: 10;
    position: relative;
    }

    #content {
    width: 100%;
    float: left;
    }

    #content .inner {
    margin-left: 322px;
    padding: 0 20px;
    }

    #sidebar-1 {
    width: 322px;
    margin-left: -100%;
    float: left;
    }

    #sidebar-1 .inner{
    padding: 0 20px;
    }

    However, I am using a nasty empty div.

    My other idea was to create a background image much larger than the width of the viewing monitor would ever be, but I am not sure exactly how that would work (maybe center it?) or if that is the best idea given how large a background image of that scale might be.

    Any suggestons?

    Thanks!
    lel

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.