<?xml version="1.0" encoding="utf-8"?>

CSS background-origin property

CSS background-origin property

The background-origin property defines the starting point of the background image.

Consider the following:

  • If you want it to start from the upper left corner of the border, you should use the border-box value
  • The padding-box value starts the image from the upper left corner of the padding edge
  • With the content-box value, the image extends to its full size from the upper left corner of the content container

Pro Tip: When the background-attachment property has a fixed value, the background origin property has no effect.

Improve your UX & Product skills with interactive courses that actually work