Thuộc tính Background Shorthand trong CSS

Thuộc tính shorthand background trong CSS được dùng để định nghĩa background cho một phần tử. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin và background-attachment cùng cấu thành các thuộc tính background CSS.

Cú pháp

Selector {
  background: /*value*/
}

Ví dụ 1: Background trên body và div

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat 40% 20%;
  }
  div {
    padding: 100px;
    background: rgba(50,100,50,0.4) url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left;
  }
</style>
</head>
<body>
  <h2>Learn</h2>
  <ul><li>Java</li><li>C#</li><li>Android</li><li>iOS</li><li>C++</li><li>C</li></ul>
  <div></div>
</body>
</html>

Kết quả

Ví dụ 2: Background trên table, td

<!DOCTYPE html>
<html>
<head>
<style>
  table, tr, td { margin: auto; border: 2px solid red; padding: 40px; }
  td { background: rgba(50,100,50,0.4) url("https://www.tutorialspoint.com/images/blockchain.png") no-repeat; }
  #demo { background: rgba(50,100,50,0.4) url("https://www.tutorialspoint.com/images/reactjs.png") no-repeat; }
  table { background: ivory url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat center; }
</style>
</head>
<body>
  <h2>Learning is fun</h2>
  <table>
    <tr><td></td></tr>
    <tr><td id="demo"></td></tr>
  </table>
</body>
</html>

Kết quả

Thứ tự giá trị trong background shorthand:

background: [color] [image] [repeat] [attachment] [position] [size] [origin] [clip];

Lưu ý:

• Chỉ background-color có thể đặt cuối (sau background-clip)
• background-size phải đi sau background-position, tách bằng / (ví dụ: center / cover)
• Có thể khai báo nhiều background layers cách nhau bởi dấu phẩy
• Giá trị bỏ qua sẽ lấy mặc định

Multiple backgrounds:

background: 
  url("pattern.png") repeat,
  url("hero.jpg") no-repeat center / cover,
  linear-gradient(45deg, red, blue);