I am trying to implement the following design:
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?
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.