CSS Backgrounds

CSS backgrounds enable the styling and customization of website backgrounds. There are several ways to define the appearance of a background in CSS, such as background color, background image, repeating images, gradients, etc. Below are examples of the usage of CSS backgrounds:

Setting background color

You can set the background color in CSS by using the background-color property. For example, if you want to set the background color to white, you can write the following rule:

body {
  background-color: white;
}

This rule sets the page background color to white.

Setting the Background Image

You can set a background image using the background-image property in CSS. For example, if you want to set a flower image as the background, you can write the following rule:

body {
  background-image: url("flower image.jpg");
}

This rule sets the background image of the page to a flower image, which is saved in the same folder as the page files.

Setting up a recurring background image

You can specify a repeating background image in CSS using the background-repeat property. For example, if you want to repeat a flower image both horizontally and vertically in the background, you can write the following rule:

body {
  background-image: url("flower picture.jpg");
  background-repeat: repeat;
}

This rule sets the flower image to repeat both horizontally and vertically.

Defining the Gradient

You can define a gradient in CSS by using the background-image property and the gradient function. For example, if you want to set the background from blue to white as a gradient, you can write the following rule:

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

This rule sets a gradient as the page background, starting from blue and ending with white from bottom to top.

Using CSS backgrounds gives you plenty of opportunities to style and format the backgrounds of web pages. It is important to note that a heavy background image or too many repetitions can slow down the page loading and affect the user experience.

Practice