CSS background

The CSS background property allows you to set the background of an element in your HTML page. You can set various properties such as color, image, position, size, and repeat to customize the background of an element.

Let's take a look at some examples of how to use the CSS background property:


    <div style="background-color: lightblue;">
      This is a div with a light blue background.
    </div>

    <div style="background-image: url('example.jpg'); background-size: cover;">
      This is a div with a background image that covers the entire element.
    </div>

    <div style="background-color: lightgray; background-position: center;">
      This is a div with a light gray background that is centered.
    </div>

    <div style="background-color: lightgreen; background-repeat: repeat-x;">
      This is a div with a light green background that repeats horizontally.
    </div>
  
Result:
This is a div with a light blue background.
This is a div with a background image that covers the entire element.
This is a div with a light gray background that is centered.
This is a div with a light green background that repeats horizontally.

In the first example, we set the background color of a div element to light blue using the background-color property. You can use color names, hex values, RGB values, or HSL values to specify the color.

In the second example, we set the background image of a div element to example.jpg and use background-size: cover to make sure the image covers the entire element. You can also use background-repeat to specify how the image should repeat.

The background-position property allows you to set the position of the background image or color within the element. You can use keywords like center, top, bottom, left, and right, or you can use percentage or pixel values.

Experiment with the CSS background property and its various properties to create unique and visually appealing backgrounds for your HTML elements!

Related CSS topics