CSS Backgrounds

Prev Next

CSS background properties are used to control the background effects of HTML elements. These properties allow you to set colors, images, and their positioning, among other things. Here's a more in-depth look at each property:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

background-color

Purpose: Sets the background color of an element. This can be a solid color or a transparent color if you want the background to show through.

Values:

• Color names (e.g., red, blue, green)

• HEX values (e.g., #ff0000 for red)

• RGB values (e.g., rgb(255, 0, 0) for red)

• HSL values (e.g., hsl(0, 100%, 50%) for red)

Syntax:

background-color: #f0f8ff; /* Light blue background */

background-image

Purpose: Sets one or more background images for an element. The image specified will be displayed in the background of the element.

Values:

URL of the image file. You can use a full URL or a relative path.

Syntex:

background-image: url('https://via.placeholder.com/150'); /* Background image from a URL */

background-repeat

Purpose: Controls the repetition of the background image. Determines whether the image should repeat across the element.

Values:

• repeat: The image repeats both horizontally and vertically.

• repeat-x: The image repeats only horizontally.

• repeat-y: The image repeats only vertically.

• no-repeat: The image does not repeat.

Syntex:

background-repeat: no-repeat; /* Image will not repeat */

Background-attachment

Purpose: Specifies how the background image behaves when scrolling. Determines whether the image scrolls with the content or stays fixed.

Values:

• scroll: The background image scrolls with the content.

• fixed: The background image is fixed in place and does not scroll.

• local: The background image scrolls with the element's content.

Syntex:

background-attachment: fixed; /* Image stays fixed when scrolling */

Background-position

Purpose: Defines the starting position of the background image within the element. Determines where the image will be placed relative to the element's edges.

Values:

• Keywords (e.g., top, bottom, left, right, center)

• Percentages (e.g., 50% 50% for center)

• Length values (e.g., 10px 20px for specific pixel positions)

Syntex:

background-position: center; /* Centers the background image */

Example:

<!DOCTYPE html>
<html>
<head>

  <title>CSS Background Properties</title>

  <style>
    .background-example {
      background-color: #f0f8ff; /* Light blue color */
      background-image: url('https://via.placeholder.com/150'); /* Placeholder image */
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
    }
  </style>

</head>

<body>

  <div class="background-example">
    
  </div>

</body>
</html>

Explanation of the Example

• background-color: #f0f8ff;

Applies a light blue background color to the <div>. This color is visible behind the background image.

• background-image: url('https://via.placeholder.com/150');

Sets a placeholder image as the background. The image will be displayed on top of the background color.

• background-repeat: no-repeat;

Prevents the background image from repeating. Only one instance of the image will be shown.

• background-attachment: fixed;

The background image stays fixed in the viewport, creating a parallax effect as you scroll.

• background-position: center;

Positions the background image in the center of the <div>. The image is aligned both horizontally and vertically in the middle

Prev Next