Background images

Hình nền background có thể được sử dụng cho hầu hết các phần tử HTML

Hình nền trong phần tử HTML

Để thêm hình nền trên một phần tử HTML, chúng ta sử dụng thuộc tính HTML style và thuộc tính CSS background-image:

Ví dụ

<div style="background-image: url('img_example.jpg');">

Xem kết quả

Chúng ta cũng có thể chỉ định hình nền trong phần tử <style>, đặt bên trong thẻ <head>

Ví dụ

<style>
div{
background-image: url('picture_2.jpg');    
}
</style>

Xem kết quả

Hình nền trên một trang

Để cài đặt hình nền trên toàn trang, chúng ta chỉ định hình nền trên phần tử HTML <body>

Ví dụ

<style>
body {
  background-image: url('picture_2.jpg');
}
</style>

Xem kết quả

Hình nền lặp lại

Nếu hình nền nhỏ hơn phần tử, hình ảnh sẽ tự lặp lại, theo chiều ngang và chiều dọc, cho đến khi nó đến cuối phần tử.

Ví dụ

<style>
body {
  background-image: url('picture_2.jpg');
}
</style>

Xem kết quả

Để tránh hình nền tự lặp lại, chúng ta đặt thuộc background-repeat thành no-repeat.

Ví dụ

<style>
body {
  background-image: url('picture_flower.jfif');
  background-repeat: no-repeat;
}
</style>

Xem kết quả

Background Cover

Chúng ta sử dụng thuộc background-size với giá trị là cover để hình nền bao phủ toàn bộ phần tử HTML.

Ngoài ra, để đảm bảo toàn bộ phần tử luôn được bao phủ, chúng ta đặt thuộc background-attachment với giá trị là fixed.

Bằng cách này, hình nền sẽ bao phủ toàn bộ phần tử mà không bị kéo giãn (hình ảnh sẽ giữ nguyên tỷ lệ ban đầu).

Ví dụ

<style>
body {
  background-image: url('picture_flower.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>

Xem kết quả

Background căng

Nếu muốn hình nền kéo dài để vừa với toàn bộ phần tử, chúng ta có thể đặt thuộc background-size với giá trị là 100% 100%.

Ví dụ

<style>
body {
  background-image: url('picture_flower.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>

Xem kết quả