Class 36 | CSS Backgrounds and Colors

CSS Backgrounds and Colors
CSS Backgrounds and Colors

CSS backgrounds and colors are essential for designing visually appealing web pages. They allow you to set the background of an element to a solid color, an image, or a gradient. In this class, we’ll cover some of the most essential CSS background and color properties, along with examples to help you understand how to use them.

Background color

The background-color property sets the background color of an element. Here’s an example:

div {
  background-color: #f2f2f2;
}

In this example, we’re setting the background color of a div element to a light gray color (#f2f2f2).

Background image

The background-image property sets the background image of an element. Here’s an example:

div {
  background-image: url("image.png");
}

In this example, we’re setting the background image of a div element to an image called image.png.

Background repeat

The background-repeat property sets how a background image is repeated. Here’s an example:

div {
  background-image: url("image.png");
  background-repeat: repeat-x;
}

In this example, we’re setting the background image of a div element to an image called image.png, and we’re repeating it horizontally (repeat-x).

Background position

The background-position property sets the position of a background image. Here’s an example:

div {
  background-image: url("image.png");
  background-position: center center;
}

In this example, we’re setting the background image of a div element to an image called image.png, and we’re centering it both horizontally and vertically (center center).

Background shorthand

The background shorthand property allows you to set all the background properties in one declaration. Here’s an example:

div {
  background: #f2f2f2 url("image.png") repeat-x center center;
}

In this example, we’re setting the background color to a light gray color, setting the background image to an image called, repeating it horizontally, and centering it horizontally and vertically.

See also  Class – 26 | HTML5 Semantic Elements | HTML Tutorial

Linear gradient

The linear-gradient() The function creates a linear gradient as the background image. Here’s an example:

div {
  background: linear-gradient(to bottom, #ffffff, #f2f2f2);
}

In this example, we’re setting the background of a div element to a linear gradient that goes from white (#ffffff) at the top to a light gray (#f2f2f2) at the bottom.

Radial gradient

The radial-gradient() The function creates a radial gradient as the background image. Here’s an example:

div {
  background: radial-gradient(circle, #ffffff, #f2f2f2);
}

In this example, we’re setting the background of a div element to a radial gradient that goes from white (#ffffff) at the center to a light gray (#f2f2f2) at the edges.

These are some of the most essential CSS backgrounds and color properties, and they can be combined in many ways to create unique and exciting designs for your web pages.

Hamza Raja

Website Developer, Blogger, Digital Marketer & Search Engine Optimization SEO Expert.

Leave a Comment