CSS Background Color

We can use the <body> tag to make changes in some of the most fundamental web page properties.

This includes changing the background color or picture of the web page.

Like the page you’re currently on, it has a orange background, and we’ve also set the opacity to 95%.

The opacity in our case reflects the white portion of the page you see, so the lower we go, the more transparent the white area would become.

This is due to the way our pages are built and styled, so if you’re adjusting an existing website with existing styles, you may require some trial and error to get the look you desire.

To add a background color in CSS, simple add the following style in your stylesheet:

body {
background-color: orange;
}

We can use the background-color CSS property for changing the color that we see behind all the elements on our web page.

It is essentially like the canvas color, which means that it is the first layer of our website and it will be covered by adding elements on top.

Background colors are very effective in giving your site a personalized look; however it’s important to also keep design principles in mind.

As noted earlier you can also use hex code or RGB color codes when setting the color of anything in CSS.

With a hex color code the css style would look essentially the same:

body {
background-color: #809fff;
}

This paragraph has a background color of #809fff and is styled using the code above, which can be applied to your body tag to give your page background this color.

 

CSS Background Opacity

Adjusting the opacity of your background is simple.

Add another element for opacity in your styling, value for opacity is between 0 and 1 with 0 being transparent and 1 being opaque, ensure you keep the leading 0 so it’s 0.1, 0.2 etc.

body {
background-color: #809fff; opacity: 0.8;
}