CSS - Backgrounds: A Beginner's Guide

Xin chào các bạn tương lai của các pháp sư CSS! Hôm nay, chúng ta sẽ nhảy vào thế giới kỳ diệu của nền CSS. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể biến những trang web平平 ph�, nhàm chán thành những kiệt tác thị giác rực rỡ. Vậy, hãy cầm lấy cọ vẽ ảo của bạn, và chúng ta hãy bắt đầu!

What is CSS Background? (Gì là nền CSS?)

Trước khi chúng ta đi vào chi tiết, hãy hiểu nền CSS là gì. Hãy tưởng tượng trang web của bạn là một canvas trống. Thuộc tính nền CSS giống như cọ vẽ của bạn, cho phép bạn thêm màu sắc, hình ảnh và mẫu để làm sống động canvas của bạn.

Background Property: The Basics (Thuộc tính nền: Cơ bản)

Thuộc tính nền CSS là một thuộc tính viết tắt cho phép bạn đặt tất cả các thuộc tính liên quan đến nền cùng một lúc. Nó giống như một cây kéo đa năng cho việc thiết kế nền của trang web của bạn!

Syntax (Cú pháp)

Dưới đây là cú pháp cơ bản cho thuộc tính nền:

selector {
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
}

Đừng lo lắng nếu điều này trông quá sức. Chúng ta sẽ phân tích nó từng phần!

Possible Values (Các giá trị có thể)

Hãy xem xét các giá trị khác nhau mà chúng ta có thể sử dụng với thuộc tính nền:

Thuộc tính	Mô tả	Ví dụ
background-color	Đặt màu nền	background-color: #ff0000;
background-image	Đặt một hoặc nhiều hình ảnh nền	background-image: url('image.jpg');
background-repeat	Chỉ định cách hình ảnh nền nên lặp lại	background-repeat: no-repeat;
background-attachment	Đặt xem hình ảnh nền có cuộn cùng phần còn lại của trang hay không	background-attachment: fixed;
background-position	Đặt vị trí bắt đầu của hình ảnh nền	background-position: center top;

Bây giờ, hãy khám phá từng thuộc tính này chi tiết hơn!

Background Color (Màu nền)

Cách đơn giản nhất để bắt đầu là đặt màu nền. Dưới đây là cách bạn làm:

body {
background-color: #f0f0f0;
}

Điều này đặt màu nền của toàn bộ trang thành màu xám nhạt. Bạn có thể sử dụng tên màu, giá trị hex, RGB hoặc thậm chí là giá trị HSL.

Background Image (Hình ảnh nền)

Muốn thêm một chút sự sống động? Hãy thêm một hình ảnh!

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

Mã này đặt 'space.jpg' làm hình ảnh nền cho toàn bộ trang. Đảm bảo rằng đường dẫn hình ảnh là chính xác, hoặc bạn sẽ kết thúc với một canvas trống!

Background Image with Color (Hình ảnh nền với màu)

Bạn có thể kết hợp hình ảnh nền với màu. Màu sẽ hiển thị qua bất kỳ phần trong suốt nào của hình ảnh:

body {
background-color: #000000;
background-image: url('stars.png');
}

Điều này tạo ra hiệu ứng đêm sao với nền đen và lớp hình ảnh sao bán trong suốt chồng lên.

Background Repeat (Lặp lại nền)

Theo mặc định, hình ảnh nền lặp lại cả theo chiều ngang và dọc. Nhưng nếu bạn không muốn như vậy thì sao?

body {
background-image: url('logo.png');
background-repeat: no-repeat;
}

Điều này hiển thị logo chỉ một lần, không lặp lại. Bạn cũng có thể sử dụng repeat-x cho lặp lại theo chiều ngang hoặc repeat-y cho lặp lại theo chiều dọc.

Background Position (Vị trí nền)

Muốn đặt hình ảnh nền ở một vị trí cụ thể? Sử dụng background-position:

body {
background-image: url('watermark.png');
background-repeat: no-repeat;
background-position: bottom right;
}

Điều này đặt水印 ở góc dưới bên phải của trang.

Background Attachment (Đính kèm nền)

Bạn từng thấy những hiệu ứng parallax cool mà nền stays put trong khi bạn cuộn? Đó là background-attachment trong hành động:

body {
background-image: url('mountains.jpg');
background-attachment: fixed;
}

Điều này giữ hình ảnh núi cố định trong khi nội dung cuộn qua nó.

Putting It All Together (Kết hợp tất cả)

Bây giờ, hãy kết hợp tất cả những gì chúng ta đã học thành một thuộc tính nền siêu mạnh:

body {
background: #f0f0f0 url('pattern.png') repeat-x fixed center top;
}

Điều này đặt nền màu xám nhạt, thêm một hình ảnh lặp lại theo chiều ngang cố định ở giữa trên cùng của trang.

CSS Backgrounds - Related Properties (Các thuộc tính liên quan đến nền CSS)

Để kết thúc hành trình của chúng ta, đây là một số thuộc tính liên quan đến nền mà bạn có thể thấy hữu ích:

Thuộc tính	Mô tả	Ví dụ
background-size	Chỉ định kích thước của hình ảnh nền	background-size: cover;
background-origin	Chỉ định vị trí của hình ảnh nền	background-origin: content-box;
background-clip	Chỉ định khu vực vẽ của nền	background-clip: padding-box;

Conclusion (Kết luận)

Chúc mừng! Bạn đã chính thức bước vào thế giới đầy màu sắc của nền CSS. Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Vậy, hãy đi thử nghiệm với các thuộc tính này, kết hợp chúng và xem bạn có thể tạo ra những thiết kế tuyệt vời nào!

Ai biết được? Với những kỹ năng này, bạn có thể trở thành Picasso của thiết kế web tiếp theo. Chúc bạn vui vẻ khi lập trình, và nền của bạn luôn luôn đẹp!

Credits: Image by storyset