display two diff background color

  1. how to display two different background color in frontpage (full width of front page) as below?

  2. i wanted to include about me information in black background; and show service information in red background

any idea? thanks.

This is way out of scope of free support but here are basic idea how you can create separate HTML sections with different background color. You can use as many different sections as you want, just amek sure to use proper HTML and CSS.

Basic HTML for those sections:

<div class="black-background">
	Your content goes here
<div class="red-background">
	Your content goes here

CSS for those sections:

.black-background {
	background: #fff;
.red-background {
	background: #FF0000;

Hi Aigars,

thanks for the advise.

I tried the code as mentioned, but the background cannot show full width. (i.e. same alignment as header and footer). the background always shown in middle of the page.

any idea where can i edit the code to enable the background show full width?


I already provided you basic idea how to get it done and now you can tweak it from there. After all you are running web design/ development agency, so you might figure that out yourself.

Support is here to help with initial theme support, error handling and some tiny customizations. Your question is way out of scope of all of these categories. Sorry about that.