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.
When you are having a WordPress website, you probably know that a lot of codes are stripped. I have searched for HTML codes which Read more...
Loes Knetsch © When you put content into an iframe, you can use any information of every website to inform your public thoroughly without duplicating Read more...
