Thuộc tính cho nền (Background) trong CSS

Tạo bởi Hoàng Vũ, chỉnh sửa cuối lúc 21 tháng 1, 2025

Các thuộc tính CSS liên quan đến nền. Bạn sẽ học cách thay đổi màu nền, thêm hình ảnh nền, căn chỉnh vị trí và kiểm soát cách lặp lại của hình nền trên trang web.

Thuộc tính cho nền (Background)

1. Thuộc tính `background-color`

Mô tả: Thay đổi màu nền của một phần tử.
Cú pháp:
```
div {
  background-color: lightblue;
}
```
Các giá trị có thể sử dụng:
- Tên màu: red, blue, green, ...
- Mã màu HEX: #ff5733, #ffffff (trắng).
- Mã màu RGB: rgb(255, 255, 255) (trắng).
- Mã màu RGBA (bao gồm độ trong suốt): rgba(0, 0, 0, 0.5).

2. Thuộc tính `background-image`

Mô tả: Thêm hình ảnh nền cho phần tử.

Cú pháp:

div {
  background-image: url('background.jpg');
}

Chú ý:
- Đường dẫn ảnh có thể là tương đối (url('images/bg.jpg')) hoặc tuyệt đối (url('https://example.com/bg.jpg')).
- Hình nền sẽ tự động lặp lại nếu không được chỉ định khác.

3. Thuộc tính `background-position`

Mô tả: Căn chỉnh vị trí hình nền trong phần tử.

Cú pháp:

div {
  background-position: center center;
}

Các giá trị phổ biến:
- top, bottom, left, right, center.
- Giá trị cụ thể: 50px 100px (dịch chuyển 50px từ trái và 100px từ trên).

4. Thuộc tính `background-repeat`

Mô tả: Kiểm soát cách lặp lại của hình nền.

Cú pháp:

div {
  background-repeat: no-repeat;
}

Các giá trị:
- repeat: Lặp lại theo cả chiều ngang và dọc (mặc định).
- repeat-x: Lặp lại theo chiều ngang.
- repeat-y: Lặp lại theo chiều dọc.
- no-repeat: Không lặp lại.

Thực hành

1. Yêu cầu

Tạo một trang HTML với một khối nền được định dạng bằng các thuộc tính CSS:

Sử dụng màu nền để làm nổi bật phần tử.
Thêm hình nền và căn chỉnh vị trí của nó.
Kiểm soát việc lặp lại của hình nền.

2. Hướng dẫn

File HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thuộc tính nền trong CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box">
    <h1>Chào mừng!</h1>
    <p>Học cách sử dụng thuộc tính nền trong CSS.</p>
  </div>
</body>
</html>

File CSS (styles.css):

/* Định dạng khối nền */
.box {
  width: 400px;
  height: 300px;
  background-color: lightblue; /* Màu nền */
  background-image: url('background.jpg'); /* Hình nền */
  background-position: center center; /* Căn giữa hình nền */
  background-repeat: no-repeat; /* Không lặp lại */
  padding: 20px;
  text-align: center;
  border: 1px solid #333;
  border-radius: 10px;
}

/* Định dạng văn bản */
h1 {
  font-size: 24px;
  color: white;
}

p {
  font-size: 16px;
  color: #333;
}

Kết luận

Bài học này giúp bạn làm quen với các thuộc tính nền, từ cơ bản đến nâng cao. Nắm vững cách kết hợp các thuộc tính sẽ giúp bạn tạo ra những thiết kế hấp dẫn và chuyên nghiệp.

Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.

Xem thêm

↑ Back to Top

Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.

Liên hệ công việc qua email dưới đây.

lhvuctu@gmail.com

Chúng Tôi Trên

Bài viết nổi bật

Thuộc tính cho nền (Background) trong CSS