How To Change The Background Color Of A 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.
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.
HTMLI 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;”>
<p style=”padding-left: 10px;”>Type here your text</p>
</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.
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 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!
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
 |
 |
 |
 |
|---|
| Home | Use of Cookies | Privacy Policy | FAQ | Affiliate Disclosure | Contact |
© Loes Knetsch. All rights reserved.
Loes
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!
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
Colors for a website are very important, take a look at my psychology of colors, you might want to change some
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!
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
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!
You’re welcome Timm, my free online to use favorites are Pixlr.com/editor, Pixlr.com/express, those 2 are very easy to use, and besides that, there are hundreds of YouTube videos to show you everything on how to use pixlr.
Loes
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
Hi Chris, nice to see you surfing my website, I have a training about creating backgrounds with images too, click here to go to this training
Loes
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?
Hi Conner, no, I have to disappoint you, I have no training videos on this subject. I do have quite some HTML training online, just like these, Click here and scroll down to HTML
Loes