How to Set the Background Color of a Page in CSS

When creating a website, one of the first things you may want to do is set the background color of the page.

This can be easily achieved using CSS (Cascading Style Sheets), which is a styling language used to separate the presentation of a website from its structure.

In this tutorial, we’ll go over the different ways to set the background color of a webpage using CSS.

Method 1: Using the background-color Property

The most common way to set the background color of a webpage is by using the background-color property.

This property can be added to the body element of your HTML document, and it will set the background color for the entire webpage.

Here is an example of how to use the background-color property to set the background color to red:

body {
background-color: red;
}

Method 2: Using the background Property

Another way to set the background color of a webpage is by using the background property.

This property is a shorthand for several other properties, including background-color, background-image, and background-repeat.

Here is an example of how to use the background property to set the background color to green:

body {
background: green;
}

Method 3: Using a Background Image

You can also set the background of a webpage using an image.

To do this, you’ll need to use the background-image property in conjunction with the background-repeat property.

Here is an example of how to set a background image and have it repeat horizontally and vertically:

body {
background-image: url('image.jpg');
background-repeat: repeat;
}

Method 4: Using a Gradient

A gradient is a smooth transition between two or more colors.

You can create a gradient background by using the linear-gradient or radial-gradient functions.

Here is an example of how to use the linear-gradient function to create a gradient background that goes from red to blue:

body {
background: linear-gradient(to bottom, red, blue);
}

Conclusion

Setting the background color of a webpage is a simple process that can be achieved using CSS.

Whether you want to use a solid color, an image, or a gradient, CSS provides various properties and functions that can be used to achieve the desired effect.

By using the above examples, you can easily set the background color of your webpage to match the design and style of your website.