Search code examples
htmlcssbackgroundsidebar

Implement stripe across page


I am trying to implement the following design:

Website Mockup

I am having trouble with the red stripe that runs across the page, I'm not sure how to implement that..

I though of using background images, one in the header and one in the right sidebar. The problem is I don't know how to make it so that the stripes connect to each other.

What I tried:

.header {
   background-image: url('../images/header-background-2.png');
   background-repeat: no-repeat;
   background-position: center bottom;
   -moz-background-size: cover; 
   -webkit-background-size: cover; 
   background-size: cover;
}

.sidebar {
   display: block;
   background-image: url('../images/sidebar-tile.png');
   background-repeat: repeat;
   background-position: center;
   -moz-background-size: contain; 
   -webkit-background-size: contain; 
   background-size: contain;
}

But it doesn't work.. You can see the result here

Any idea how to implement this?


Solution

  • I realized that it would be too difficult to implement this design on a fluid layout. So here is what I did: on width < 1030, I implement another layout, not in the scope of this question.

    For screen widths greater than 1030px, I set a max-width on my content. I now have a fixed width layout that will make it much easier to implement the red stripes.

    Here's my code:

    .wrap { max-width: 1030px;}
    

    And apply the wrap class on my inner-header, inner-content and inner-footer.

    Then:

    #inner-header {
      background-image: url('../images/header-background-1030-3.png');
      background-repeat: no-repeat;
      background-position: center bottom;
    }
    
    #inner-content {
      background-image: url('../images/sidebar-background-1030-tile-2.png');
      background-repeat: repeat-y;
      background-position: center top;
    }
    
    #inner-footer {
      background-image: url('../images/sidebar-background-1030-tile-2.png');
      background-repeat: repeat-y;
      background-position: center top;
    }
    

    Note that my background images all have a width of 1030px. There's no resize problem anymore and the layout keeps in place nicely.