CSS Background styling

The background property in CSS is a comprehensive shorthand property used to set various background-related properties for an element. It allows you to define multiple background properties at once.


Background properties

  • background-color :

    • Sets the background color of an element.

    • Values : Color names, hex codes, RGB/RGBA values.


  • background-image :

    • Specifies one or more images to use as the background.

    • Values : Image URLs, gradients (linear-gradient(), radial-gradient()).


  • background-repeat :

    • Controls how the background image is repeated.

    • Values : repeat, repeat-x, repeat-y, no-repeat.


  • background-position :

    • Sets the starting position of the background image.

    • Values : Keywords (top, bottom, left, right), lengths, percentages.


  • background-size :

    • Defines the size of the background image.

    • Values : auto, cover, contain, lengths, percentages.


  • background-attachment :

    • Specifies whether the background image scrolls with the content or remains fixed.

    • Values : scroll, fixed, local.


CSS Background Color properties (background-color: value;)

The background-color property in CSS is used to set the background color of an element. It defines the color that fills the background space behind the content of an element.

Example:

/* Setting a background color for a div element */
div {
  background-color: #f5f5f5; /* Light gray background color */
}

Background Color Values

  • Color Names : Named colors like red, blue, green, etc.

  • Hex Codes : Six-digit hexadecimal color codes (#RRGGBB).

  • RGB/RGBA Values : Red, Green, Blue, and Alpha channel values (rgb() or rgba()).

  • HSL/HSLA Values : Hue, Saturation, Lightness, and Alpha channel values (hsl() or hsla()).

Share