Tạo kiểu nền (Background) cho phần tử trong CSS

Chúng ta có thể chỉ định các thuộc tính nền của phần tử bằng shorthand background. Nó chấp nhận giá trị cho:

• background-color
• background-image
• background-repeat
• background-position
• background-clip
• background-size
• background-origin
• background-attachment

Cú pháp

Selector { background: /*giá trị*/ }

Ví dụ 1: Shorthand background

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: gray url("https://www.tutorialspoint.com/pytorch/images/pytorch.jpg") no-repeat;
  font-size: 1.2em;
  color: black;
}
h2 {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px black;
}
p {
  box-shadow: 0 0 5px 5px black;
}
</style>
</head>
<body>
<h2><i>PYTORCH Tutorial</i></h2>
<p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
<ul>
  <li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
</ul>
</body>
</html>

Kết quả

Ví dụ 2: background-color riêng cho h2 và div

<!DOCTYPE html>
<html>
<head>
<style>
h2 { background-color: bisque; }
div {
  margin: auto;
  background-color: orange;
  width: 40%;
}
</style>
</head>
<body>
<h2>Demo Text</h2>
<div>demo demo demo demo</div>
</body>
</html>

Kết quả

Thứ tự shorthand khuyến nghị:

background: color image repeat attachment position / size origin clip;

Ví dụ: background: #fff url(img.jpg) no-repeat fixed center / cover content-box border-box;