How to Add & Change Background Color in HTML

Changing or adding background color in HTML is a very simple but oftentimes overlooked process that can help a webpage/website go from good to great. The background color is the color of the page that can be seen behind your text, images, and other content. Sometimes this background color is not appropriate for certain text or it might be necessary to change it for other reasons. 

In many cases, you don’t even have to worry about this, but it might be an important factor for search engines that are on your site and how they see your website in general. This short tutorial will cover how to add or change the background color for HTML elements. This method works in all modern browsers and will work on any device without fail. The web is full of sites with strikingly beautiful backgrounds, from gradients to textures to graphics. Find out how you can easily add and customize your own background in HTML.

Download Now: How to Choose the Right PSD to HTML Partner [Free Guide]

i) Personalization of your websites:

In HTML if you have multiple pages residing on the same domain and each page contains an image in the background you can use this method to change the color of each image to help make your site unique. Minor attention to detail gives a powerful impression.

ii) Dynamically change the background color:

You can easily dynamically change the background color based on what page you are viewing or conditionals within your code. This is only possible if you know how CSS works, but it helps to create a more dynamic website (for example, a site that changes with user interaction as well as simple interaction like clicking on a button).

iii) Easy to implement:

This method is easy to implement if you know the basics and can be applied by anyone.

iv) Easy to add multiple background images:

You can easily add multiple background images if you want different colored backgrounds for different pages.

v) Different background for Header:

If you simply want a different color for your header, this tutorial will help do that very easily.

vi) Resizing Background Image:

You can also resize the image if needed, which is important if your website visitors view the site on mobile devices or tablets.

vii) Make your site look more professional:

This method can make your site look more professional, especially if you are looking to advertise a product or service to customers.

viii) Search Engine Optimization (SEO):

Your website will be easier for search engines like Google and Bing to index and crawl if you follow this step as well.

How to add & change background color in HTML:

1) First of all we need to add the HTML markup for a new background. We can’t just style some text or an image and expect browsers to adopt the background color to it, that won’t work. We have to do our job and make sure the browser knows where to find your background color.

2) The first thing we’ll do is declare the background color. This can be done in many ways, but I’ll just show you the basics here. For example, We are going to set it to #200909 which is a light grey/white color.

3) Next we need to add some HTML markup for our background image. The background image can be any type of image you want to use, but I highly recommend using a smaller file size if possible so the page doesn’t load too slow for visitors on slower connections or devices with less processing power. I will also be using an image from Photodune, however, there are many free resources out there and you should feel free to use them in your projects. The image I’ve chosen here is a simple black-and-white checkerboard pattern that we will be adding to our background.