All CSS Background Properties Explained in 5 Minutes

Quick, but Complete Introduction to CSS Background Properties

🎨 Color

📷 Image

Repeat

Example showing the different background-repeat values

Size

  • cover - It fills (covers) the entire area of the element with the image, without stretching. Even if it means that parts of the image won't be visible.
  • contain - The opposite of cover. It makes sure that the entire image fits (is contained) in the element, without squashing.
  • When only one value is provided, it sets the image’s width. Height is set automatically to preserve proportions.
  • When two values are provided, the first one sets the width, and the second sets the height.
250 x 125 image in a 300 x 300 box. The semi-transparent parts represent image tiling with background-repeat: repeat.

Position

  • When using one value, it sets the image’s horizontal (x-axis) position. The vertical (y-axis) position defaults to 50%.
  • When using two values, the first sets the horizontal position and the second: vertical.

📌 Attachment

  • scroll - Scrolls with the page, but not with the element's contents.
  • fixed - Fixed to the viewport. Acts like a window to something behind the page.
  • local - Scrolls with the page and the element's contents.

Origin

  • border-box - The background starts at the outer edge of the border. It goes under it, which you can see if the border is semi-transparent, dashed, or dotted.
  • padding-box - The background starts at the inner edge of the border.
  • content-box - The background starts where the element's content does.
This example assumes background-repeat: no-repeat;

Clip

  • border-box - The background is clipped to the outer edge of the border. It will be visible under the border, padding and content.
  • padding-box - The background is clipped to the inner edge of the border. It will be visible under the padding and content.
  • content-box - The background is clipped to the content area. It will only be visible under the element's content.
  • text - The background will only be visible under the element's text content. Make sure to set color: transparent to see the background. This can be used to achieve some cool effects like gradient text.

Layers

Click them, don’t be shy 😉

You Might Also Like

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store