Implement stripe across page - html

Question

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?

Answer 1

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.

Answer 2

Try creating that image by making a 1x1 pixel in that color ie., rgb(194, 39, 45). Then you can use this image and CSS for the (straight parts) of the background (ie, where the curves are not placed). You can also use CSS entirely by creating divs and border radius (radii?). A 1x1 pixel repeated using CSS is better for a background image bc it will look the same on any device.

Answer 3

maybe i don't understand your question, but if you want the website to be readable in various devices and window sizes; why wouldn't you use divs and style rules?

Answer 4

First let's divide the red part into the first curve at the top left, the menu, and finally the last curve/rest of the red bar. In on div create the first curve as an image, using photoshop or any other photo editor. Then in the next div create the menu bar, with the same red colored background. Finally do the same thing as you did for the first curve to the last part. Use a photo editor to to draw it out as a jpeg and put it into the div. Use css styles to order the divs in place.