1. CSS
  2. CSS Căn bản
  3. CSS Background image

CSS Background Image

CSS background-image

Thuộc tính background-image quy định cụ thể một hình ảnh để sử dụng là một hình nền cho một phần tử HTML.

Theo mặc định, hình ảnh được lặp lại để nó bao phủ toàn bộ phần tử (nếu hình ảnh nhỏ hơn phần tử.

Ví dụ

<style>
body {
  background-image: url("caro.png");
}
</style>

Xem kết quả

Ví dụ: Sự kết hợp không tốt giữa văn bản và hình nền, văn bản khó đọc.

<style>
body {
  background-image: url("vutru.png");
}
</style>

Xem kết quả

Lưu ý: Khi sử dụng hình nền, phải chú ý sử dụng hình ảnh phù hợp để không làm xáo trộn văn bản.

Hình nền cũng có thể được đặt cho các phần tử cụ thể, như phần tử <p>

Ví dụ

<style>
p {
  background-image: url("caro.png");
}
</style>

Xem kết quả

CSS background-repeat

Theo mặc định, thuộc tính background-image sẽ lặp lại một hình ảnh theo cả chiều ngang và chiều dọc nếu nhỏ hơn phần tử đó.

Một số hình ảnh chỉ nên được lặp lại theo chiều ngang hoặc chiều dọc, nếu không chúng sẽ trông rất kỳ lạ, ví dụ như thế này.

Ví dụ

<style>
body {
  background-image: url("gradient-bg.jpg");
}
</style>

Xem kết quả

Nếu hình ảnh trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), hình nền sẽ có vẻ đẹp hơn.

Ví dụ

<style>
body {
  background-image: url("gradient-bg.jpg");
  background-repeat:repeat-x;
}
</style>

Xem kết quả

Để lặp lại một hình ảnh theo chiều dọc, hãy sử dụng thuộc tính background-repeat: repeat-y;

CSS background-repeat: no-repeat

Nếu chúng ta muốn hiển thị hình nền chỉ một lần và không lặp lại, chúng ta sử dụng thuộc tính background-repeat: no-repeat.

Ví dụ

<style>
body {
  background-image: url("no-el.jpg");
  background-repeat: no-repeat;
}
</style>

Xem kết quả

Trong ví dụ trên, hình nền được đặt ở cùng vị trí với văn bản. Chúng ta sẽ thay đổi vị trí của hình ảnh, để nó không che nội dung văn bản quá nhiều.

Ví dụ

<style>
body {
  background-image: url("no-el.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}
</style>

Xem kết quả

CSS background-attachment

Thuộc tính background-attachment quy định hình nền có được di chuyển hoặc cố định khi chúng ta cuộn trang hay không.

Ví dụ: Hình nền sẽ được cố định khi chúng ta cuộn trang

<style>
body {
  background-image: url("no-el.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
</style>

Xem kết quả

Ví dụ sau chỉ định hình nền sẽ di chuyển khi chúng ta cuộn trang

Ví dụ: Hình nền sẽ di chuyển khi chúng ta cuộn trang

<style>
body {
  background-image: url("no-el.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
</style>

Xem kết quả

CSS background - viết tắt

Để rút ngắn mã, chúng ta có thể chỉ định tất cả các thuộc tính background trong một thuộc tính duy nhất. Đây được gọi là thuộc tính viết tắt.

Thay vì viết

body {
  background-color: #ffffff;
  background-image: url("no-el.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}

Chúng ta có thể sử dụng thuộc tính viết tắt background.

Ví dụ

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Xem kết quả


  1. CSS
  2. CSS Căn bản
  3. CSS Background image


BÀI VIẾT LIÊN QUAN

BÀI VIẾT CHỦ ĐỀ KHÁC