background-origin trong css

background-origin là thuộc tính chỉ định vị trí gốc của ảnh nền.

Thuộc tính Background Origin

background-origin là thuộc tính chỉ định vị trí gốc của ảnh nền.

Note: Thuộc tính background-origin không làm việc khi background-attachment chỉ định là fixed.

Giá trị của background-origin

Giải thích

Thông thường, 1 phần tử sẽ có 4 thành phần:

margin > border > padding > content

Tương ứng sẽ hiển thị như sau:

Với mỗi thành phần của 1 phần tử thì các giá trị hiển thị sẽ tướng ứng như sau: border => border-box padding => padding-box content => content-box

Áp dụng

Tôi sẽ làm một ví dụ nhỏ về 3 giá trị: border-box, padding-box, content-box. Với mỗi value vị trí hình nền sẽ hiển thị khác nhau. Ví du thực tế như sau:

Tôi sẽ dựng sẵn source code html và css.

// code css
.demo {
  margin: 30px;
  padding:30px;
  border:10px dashed;
  height: 200px;
  background-image: url('img/icons/css.svg');
  background-repeat: no-repeat;
  background-size: 100px;
}
.example {
  background-color: #e1e1e1;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

<!-- html -->
<div class="example">
  <div class="demo">
    Lorem Ipsum is simply dummy text
  </div>
</div>

• border-box.

Source code:

.borderBox {
  background-origin: border-box;
}

<div class="example">
  <div class="demo borderBox">
    Lorem Ipsum is simply dummy text
  </div>
</div>

• padding-box hoặc initial.

Source code:

.paddingBox {
  background-origin: padding-box;
}

<div class="example">
  <div class="demo paddingBox">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </div>
</div>

• content-box.

Source code:

.contentBox {
  background-origin: content-box;
}

<div class="example">
  <div class="demo contentBox">
    Lorem Ipsum is simply dummy text
  </div>
</div>