To separate background or not to separate?

I need advice on if I should breakup the background as in giving a div for the top, middle, and bottom
should I keep the background as one element?
(The reason I’m asking is because the split is diagonal kinda and not horizontal.)

If separate, I need help with the markup, because usually I would section of the header and make that background the top, but the split is diagonal and I’m not sure if that would effect the box.

I would do it in 3 seperate divisions. The top would become the background of the header div, the main area would repeat in the main content div and then the bottom would be the background of the footer div. :slight_smile:

Rough example:

Download the files I used:

Hope it helps. :slight_smile:

Thankyou for the advice. I was thinking that would be the best choice.

Hey Barry,

Yeah, breaking the background up is definitely a must in the event of your content growing larger than what the background can hold. by making the ‘middle’ part of the background repeatable then this will repeat to hold all content no matter how large the page grows.


Yeah So I decided not to break the background. I was getting some issues with the background spacing apart only when the first element in the “inner” was a list.
However, when I removed the list, it worked fine. Also, the orange bottom isn’t the footer…just the end of the main content…

So I think on this design I won’t break it…

So a lesson I learned on this website is to design it right the first time to save time in the long run… haha.