How to Change the Background Color in CSS

Making Background Color in CSS

buayaberdiri.blogspot.com - In CSS we can change or make the background color on the appearance of the website page. Changing the background color is often used to make the website look nicer to look at.

Then how do you write the CSS code to add color to the background? See the code below:

div{

            margin: 10px;

            padding: 2px;

            background-color: aquamarine;

        }

In the code example above we want to color the html div element with the color aquamarine. Then the code is background-color: aquamarine;

We can change to various colors such as red, blue, light blue, pink, orange, silver, black, brown, white and others.

How to Create Background Color Using RGB Code

In the example below we will create a red background using the RGB code :

div{

            margin: 10px;

            padding: 2px;

            height:150px;

            background-color:rgb(255, 0, 0, 1);

        }

The RGB code for red is rgb(255, 0, 0, 1).

There is something unique about the RGB color, if you can't memorize or know the name of the transparent color. Then the RGB code is very easy to make a transparent color for the background.

For example, if the red color is rgb (255, 0, 0, 1) , then for the transparent color we can change the back code to 1.

So we can lower the value of the number 1 to 0.7 . Then the code is rgb(255, 0, 0,  0.7).

Example Code :

 div{

            margin: 10px;

            padding: 2px;

            height:150px;

            background-color:rgb(255,0,0,0.7);

        }

Then the result will be like this:

Make more than one background color (Gradients Color)

We can make several colors or more than one background color in CSS, for example we can give 3 colors or 4 colors or more.

In the code example below, it creates 3 background colors simultaneously in one div element, namely green, yellow and blue.

div{

            margin: 10px;

            padding: 2px;

            height:150px;

            background-image: linear-gradient(green, yellow, blue);

        }

To add 3 background colors we can use the background-image property and value linear-gradient(color 1, color 2, color 3).


Then the result will appear like this:

Check out other articles about HTML & CSS:

1. Learn Input Types In HTML For Login And Register Form
2. Learn HTML List - How To Create Square, Circle, Number List
3. How To Create Comments Line In HTML
4. How to Add Text Formatting In HTML
5. Adding The Fieldset Code To The Form In HTML
6. How to Create a Search Box in Pure HTML
7. Create Color Charts With Pure HTML
8. How to change font size using CSS
9. Types of Border Styles in CSS Code

List of Article Posts https://buayaberdiri.blogspot.com