How to Change Background Color in HTML

html background color When it comes to web design, looks are very important. The appearance of your website is determined to a large extent by the kind of background you use. The background is what the user will be seeing at all times and in order to have a good user experience, it has to be good. Well, in this tutorial, we take a look at how to change background color in HTML. This may come in very handy when you are designing a site to have appealing visuals and a friendly color scheme. There are different ways in which you can achieve this so without any further ado we will head on right to the tutorial.

For a start, it is important to note that there are different kinds of backgrounds on a website such as the body background and the content background. The body background is the one at the very back of the page and it can either be a color, pattern or an image. On the other hand, content background is the background of a block of text, images and other graphical elements on your web page.

In CSS, the background-color property is used to set the background color of an element. This is defined in the body tag as shown in the code snippet below.

CSS code

HTML Code

In CSS, you can specify a color by using either a Hex value such as “#ffffff”, an RGB value such as “rgb (255, 224, 5)” or a color name such as “red”. You can also have different background colors for different elements.
For example:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}

You can also have the background being an image using the background-image property. By default, the image is usually repeated such that it covers the entire element. For example, the following code takes the image referred to by the URL and sets it as the background of the page.

body {background-image:url('pattern.gif');}

The color scheme should also be given keen attention as it affects the look of the entire site. The color of the image and the text should complement each other so that the text is readable. Suppose you would like to tile the background image either vertically or horizontally, you can make use of the following code.

body
{
background-image:url('gradient.png');
background-repeat:repeat-x;
}

This comes in very handy when you want a nice gradient effect. All you need is a small strip image with a gradient and repeat this image either horizontally or vertically .

It is important that you use the right color combinations in your website. Here are a few articles that will help you choose the right color combinations:

(image is of colorschemedesigner.com)

Leave a Reply

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