Change background color website partially

Loes Knetsch ©

Some themes have this as default, a white background, then another color, and back to white again. You can create this with an HTML code too. This training will show you how to change your background color partially.

HTML code 50

Change the background color on your website partially

When you surf to my landing page, you can see how I have changed the background color to light blue. I will use it on this page too. Here I will use a soft orange color.

 

HTML

I love to work with HTML, simple codes, with which you can create so many nice visuals. Not only backgrounds but also:

 

The table code to create this is:

<table class=”alignnone” style=”width: 100%; border-collapse: collapse; background-color: ffcc66;” border=”0″>
<tbody>
<tr>
<td style=”width: 100%; background-color: #ffcc66; text-align: left; vertical-align: top;”>&nbsp;
<p style=”padding-left: 10px;”>Type here your text</p>
&nbsp;</td>
</tr>
</tbody>
</table>

 

What is changed in this table?

width: 100%; When you don’t want it full-width, change this to another percentage. This is set on 50%

 

background-color: #ff9900 – Change the color into any #colorcode.

 

padding-left: 30px – You can change the padding afterward

 

For the padding

When you have added the text put your cursor before the sentence and click the padding button in the toolbar. The tool is set to 30px by default, you can change this in the text editor to any number.

padding tool WordPress

Little warning

When your code doesn’t work correctly! When you copy an HTML code from a website and paste it into your own WordPress editor, sometimes the brackets are changing into strange looking comma’s. When you replace those for the regular comma’s the code works again. And sometimes they will be duplicated, then you delete the weird looking comma’s.

HTML copy warning

HTML Background Color Codes

Here is a table and every cell has a different background color

#cfcaca #ebb988 #f7cc4a #f5f258 #dbde50 #e1f734 #baf78b #a9f5ed #7a7ef5 #fab9d6
#ccb8b8 #d9a775 #e0b943 #e6e345 #b1b340 #c9de2a #a1ed66 #89c4be #7a7cc4 #d6b0c1
#cca7a7 #c99765 #c9a63c #d4d137 #888a32 #b1c41f #86de43 #658f8b #7274a1 #b89aa7
#c99595 #b88654 #b59536 #c2bf29 #606124 #9fb30c #6cc924 #4d6361 #696b82 #8c506a
#c78383 #ab7948 #9e822f #b0ae1e #494a14 #839401 #69db12 #626666 #5a5a63 #5c4750

 

I hope you liked my training, if you have a great HTML tip to share, please leave it below in a comment.

Learn online how to create a website, sign up for free!

We can teach anyone to become successful online

 

Don't be afraid to< 'https://learn-a-new-language.jpg' alt='Create A Website' Price='0' Quality='100%' >Wealthy Affiliate University's Affiliate Marketing Course Click To Tweet

Other Awesome HTML Training

 

awesome_looking_gallery awesome_looking_gallery awesome_looking_gallery awesome_looking_gallery

 

(Visited 36 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

  1. Clay Westfall says:

    Loes, You have no idea how long I have struggled with this.  My problem is when I tried to learn how to do this, it’s always been so complicated.  Thank you for a very comprehensive and understanding walk-thru.  I have already changed the shade on one of my websites three times… now if you could just teach me how to make up my mind!  Thank you so much for your very informative website.  Clay

  2. Lynne Huysamen says:

    Thank you for this training on how to change the background colour. I know some very basic html and I find it very useful. This will be very handy to use to highlight blocks of text – I’m going to see how I can implement this on my website. Thanks also for the tip about copying the code and the commas!  

    • Loes says:

      You’re welcome Lynne, I have had that comma-thingy more than once, I don’t know why WordPress does this. Success using my codes.

      Loes

  3. Timm Mullowney says:

    Loes, 

    Thanks for showing me this. I have been trying to figure this out , but I could only get the whole background to change in my theme. Not only do I have the directions, but you even gave me a color chart!

    I currently use Inkscape for all my designs, if you are familiar with the program it is not user friendly and takes time to learn. What would you recommend for someone just starting out?

    Also is it better to add a code for the design, or add it like a picture? 

    Thanks once again!

  4. Chris says:

    Yet another very interesting article – I just read your other article on changing the header in a WordPress blog…but you’ve also peaked my interest by mentioning background change in this article! 

    You mention that you can change the background, but I’m wondering if you can maybe use an image, like a photograph as your background as well? Would you know anything about this – if it’s possible?

    Thanks in advance for your help

    Chris

  5. Conner says:

    Hey there! I have always struggled with the html codes myself on my website and I felt I obtained some clarity after reading your post. Personally, I think it is important to have various color schemes on your pages as it grabs the readers attention. Do you have any how to videos or any tools that will help me with learning more about html coding?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>