How to Add & Change Background Color in HTML

HTML 5 | July 15, 2022
change background color 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]

Benefits of adding Background Color in HTML

  1. Personalization of your websites
  2. Dynamically change the background color
  3. Easy to implement
  4. Easy to add multiple background images
  5. Different background for Header
  6. Resizing Background Image
  7. Make your site look more professional
  8. Search Engine Optimization (SEO)

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.

4) We’ll be using the HTML5 “background”-property to do this. This can be used either to add an image as the background or change the color of the text/image’s background. Here is what it should look like:

<head>

<meta charset=”UTF-8″>

    <title>Changing background color in HTML/CSS</title>

    <style>

     body {

            background-color: #78a8eb;

     }

    </style>

</head>

5) Now all we have to do is add a background image to this. An important thing to note here is that the CSS and HTML elements will not be the same size, so we need to make sure that our image has the same aspect ratio as our final element will be. The best way to do this is by inserting an empty HTML element and placing an empty span inside, then using this as a “canvas” for our background image.

<head>

<meta charset=”UTF-8″>

    <title>Changing background color in HTML/CSS</title>

</head>

6) Now that we have an HTML element and an image to use as our background, we can link the two together.

7) The last thing we must do is add some CSS code to our image. This can be done by either using an external style sheet or directly adding it inline. It doesn’t matter how you do this as long as it’s done right, but if you have no experience with in-line CSS, I strongly advise against this route for many reasons. The best way to add the CSS is to link to a style sheet or add one (if you’re adding it inline) and then use the background-image property with a URL pointing directly to your image.

Conclusion:

The background-color property can be used to change or add a background color for HTML elements. It works in all modern browsers and it doesn’t have any limitations. It is also useful if you have certain content that should be transparent or has some other effect that’s just not visible through the background. This code is not the best way to achieve this, but it will work in most cases. The best way to do this is probably through the use of CSS.