The CSS Background-Origin Property

Background origin explained

The CSS background-origin property is used to specify where to position the background image:

div {
    border: 10px double black;
    padding: 15px;
    background: url(sheet.gif);
    background-repeat: repeat;
    background-origin: padding-box;
}

It might seem similar to background-clip, but the background is resized and not clipped.

Note: this property does not have any effect if background-attachment is set to fixed.

Syntax for the background origin

The syntax for the CSS background-origin property is rather simple:

background-origin: value;

In the following section, we will explain the three available values.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Property values

The area of each element in CSS can be defined by one of three boxes:

• the content box holds the content of the element
• the padding box holds the content and its padding
• the border box holds the content, the padding and the border

With CSS background-origin, you can define the position of the background in relation to each of these boxes:

Browser support

Chrome

1+

Edge

12+

Firefox

4+

IE

9+

Opera

10.5+

Safari

3+

Mobile browser support

Chrome

18+

Firefox

14+

Opera

11+

Safari

1+