Adding Background Color Using CSS

There are two main methods for adding background colors to websites. The first way is to add a solid color, while the second consists of adding a gradient. Both are achieved through CSS and can result in enhanced user experience and better website branding.

 

It is also possible to add image backgrounds to websites using CSS, but this article only focuses on colors.

 

Adding a Solid Color

 

The CSS element needed to add a solid color background to a website is "background-color". For example, the code below would create a blue background:

 

div {

background-color: #0000ff;

}

 

The color can be specified in a number of different ways:

 

·         Using a hexadecimal (also known as hex) code - as in the example above - #0000ff

·         RGB values - for example rgb(0, 0, 255) for blue

·         HSL colors - for example, hsl(120, 100%, 25%) is a dark green color

·         Keywords - for example, using "blue" for blue

 

It is also possible to use RGBa and HSLa values. These are color values that specify the level of opacity of the color. It means that you can make the background appear transparent. An example of this is:

 

div {

background-color: rgba(0, 0, 255, 0.3);

}

 

This represents blue with opacity of 0.3.

 

However, not all browsers support RGBa and HSLa, particularly older browsers. This means that no color will be displayed unless a backup is included. Therefore, in CSS, you should put the backup color first, and then the color that you really want. The browser will use the first choice color if it can, but it also has a fall back if it can’t. An example of this is:

 

div {

  background-color: #0000ff;

  background-color: rgba(0, 0, 255, 0.3);

}

 

So, rgba(0, 0, 255, 0.3) is the primary choice, and #0000ff is the solid backup without an opacity setting.

 

Adding a Color with a Gradient

 

Gradients can make background colors look even more sophisticated and appealing. Modern browsers support this functionality, but older browsers do not. Therefore, it is necessary to have a backup solid color in your CSS code.

 

The process involves using the function "linear-gradient()" and entering the start and end colors within it. The browser then deals with the gradual transition between the two colors.

 

A simple example of a linear gradient going from blue to white is:

 

div {

  background: #0000ff;

  background: linear-gradient(#0000ff, #ffffff);

}

 

Now, what if you want the gradient to move in a different direction? To shift the gradient from white down to blue is easy - all you need to do is change the order of the colors within the brackets. However, what if you wanted the gradient to move left to right, or diagonally?

 

To do this, you use left, right, bottom, and top values. To move the gradient from the left to the right, you would use:

 

div {

  background: #0000ff;

  background: linear-gradient(to right, #0000ff, #ffffff);

}

 

Finally, it is also possible to add radial gradients. This uses the "radial-gradient()" function rather than the "linear-gradient()" function.

 

div {

  background: #0000ff;

  background: radial-gradient(#0000ff, #ffffff);

}

 

This moves from blue to white at the center of the background.

Happymarli
Happymarli Hire Me

Professional Proofreader, Editor and Writer

Do you need a professional editor and writer to proofread your technical document, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, article, and marketing material ensuring their content is flawless and appealing to readers? Why Hire Me? 1) I have a 5 star average rating for 2397+ projects completed on freelancer. 2)...

Hire Me

Next Article

Developing Web Applications Using Node.js Part 2