Bài 6: Backgrounds - các thuộc tính của background

Updated: 1 year ago

Trong thiết kế web, việc sử dụng hình nền (background) là một phần quan trọng để tạo nên giao diện đẹp mắt và cuốn hút. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về các thuộc tính background trong CSS, bao gồm background-color, background-image, background-repeat, background-position, và background-size. Hiểu rõ và biết cách áp dụng các thuộc tính này sẽ giúp bạn dễ dàng tạo nên những hình nền độc đáo và chuyên nghiệp cho website của mình. Cùng khám phá ngay!

1. Tổng quan về thuộc tính `background` trong CSS

Trong CSS, bạn có thể tùy chỉnh nền của bất kỳ phần tử HTML nào bằng các thuộc tính nền khác nhau. CSS cho phép bạn sử dụng màu sắc hoặc hình ảnh làm nền và điều chỉnh vị trí, kích thước, kiểu lặp của nền để phù hợp với thiết kế.

Các thuộc tính nền chính:

background-color: Đặt màu nền cho phần tử.
background-image: Sử dụng hình ảnh làm nền.
background-position: Đặt vị trí của hình ảnh nền.
background-size: Điều chỉnh kích thước của hình ảnh nền.
background-repeat: Quy định việc lặp lại hình ảnh nền.
background-attachment: Điều chỉnh cách cuộn của hình ảnh nền.
background: Thuộc tính rút gọn để thiết lập nhiều giá trị nền cùng lúc.

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

background-color cho phép bạn đặt màu nền cho phần tử. Bạn có thể sử dụng tên màu, mã HEX, RGB, RGBA, hoặc HSL để chỉ định màu nền.

Ví dụ:

css

body {
    background-color: lightblue;
}

div {
    background-color: #f0f8ff; /* AliceBlue */
}

p {
    background-color: rgba(255, 99, 71, 0.5); /* Màu Tomato với độ trong suốt */
}

Kết quả:

body có nền màu xanh nhạt (lightblue).
div có nền màu AliceBlue (#f0f8ff).
p có nền màu Tomato với độ trong suốt 50% (rgba(255, 99, 71, 0.5)).

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

background-image cho phép bạn đặt hình ảnh làm nền cho phần tử. Bạn có thể sử dụng đường dẫn URL đến hình ảnh để làm nền.

Cú pháp:

css

background-image: url('path-to-image');

Ví dụ:

css

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

Lưu ý:

Đường dẫn của hình ảnh có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối. Đảm bảo đường dẫn đúng để hình ảnh được hiển thị.

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

Mặc định, hình ảnh nền sẽ lặp lại theo cả chiều ngang và chiều dọc. Bạn có thể điều chỉnh cách lặp hình ảnh nền bằng thuộc tính background-repeat.

Các giá trị của `background-repeat`:

repeat: Lặp lại theo cả chiều ngang và dọc (mặc định).
no-repeat: Không lặp lại hình ảnh nền.
repeat-x: Chỉ lặp lại theo chiều ngang.
repeat-y: Chỉ lặp lại theo chiều dọc.
space: Lặp lại hình ảnh nhưng để khoảng cách giữa các bản sao.
round: Lặp lại hình ảnh, tự động điều chỉnh kích thước sao cho vừa với vùng nền.

Ví dụ:

css

body {
    background-image: url('images/pattern.png');
    background-repeat: no-repeat; /* Không lặp lại hình ảnh */
}

Trong ví dụ này, hình ảnh pattern.png chỉ xuất hiện một lần và không lặp lại.

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

background-position cho phép bạn điều chỉnh vị trí của hình ảnh nền trong phần tử. Bạn có thể chỉ định vị trí bằng từ khóa, toạ độ pixel hoặc phần trăm.

Các giá trị từ khóa thông dụng:

left, center, right: Canh lề theo chiều ngang.
top, center, bottom: Canh lề theo chiều dọc.

Cú pháp:

css

background-position: horizontal vertical;

horizontal: Vị trí theo chiều ngang.
vertical: Vị trí theo chiều dọc.

Ví dụ:

css

body {
    background-image: url('images/background.jpg');
    background-position: top right; /* Đặt hình ảnh ở góc trên bên phải */
}

Trong ví dụ này, hình ảnh nền sẽ được đặt ở góc trên cùng bên phải của phần tử.

6. Thuộc tính `background-size`

background-size giúp bạn điều chỉnh kích thước của hình ảnh nền. Bạn có thể chỉ định kích thước bằng px, %, hoặc sử dụng các từ khóa cover và contain.

Các giá trị phổ biến của `background-size`:

cover: Hình ảnh sẽ bao phủ toàn bộ vùng nền, có thể bị cắt xén.
contain: Hình ảnh sẽ được thu nhỏ hoặc phóng to để vừa với vùng nền mà không bị cắt xén.
auto: Kích thước mặc định, không thay đổi.

Ví dụ:

css

body {
    background-image: url('images/background.jpg');
    background-size: cover; /* Hình ảnh sẽ bao phủ toàn bộ vùng nền */
}

Trong ví dụ này, hình ảnh nền sẽ phóng to để bao phủ toàn bộ vùng nền.

7. Thuộc tính `background-attachment`

background-attachment xác định cách hình ảnh nền sẽ cuộn theo trang hoặc cố định. Có ba giá trị chính:

scroll: Hình ảnh cuộn theo trang (mặc định).
fixed: Hình ảnh cố định, không cuộn theo trang.
local: Hình ảnh cuộn theo nội dung phần tử (ít sử dụng hơn).

Ví dụ:

css

body {
    background-image: url('images/background.jpg');
    background-attachment: fixed; /* Hình ảnh cố định khi cuộn trang */
}

Trong ví dụ này, hình ảnh nền sẽ không di chuyển khi người dùng cuộn trang.

8. Thuộc tính `background` (thuộc tính rút gọn)

CSS cho phép bạn sử dụng thuộc tính background để rút gọn và thiết lập nhiều giá trị nền cùng lúc. Bạn có thể kết hợp background-color, background-image, background-position, background-size, background-repeat, và background-attachment chỉ trong một dòng.

Cú pháp:

css

background: color image position/size repeat attachment;

Ví dụ:

css

body {
    background: #f0f8ff url('images/background.jpg') top right / cover no-repeat fixed;
}

Trong ví dụ trên:

#f0f8ff: Màu nền là AliceBlue.
url('images/background.jpg'): Hình ảnh nền.
top right: Đặt hình ảnh ở góc trên cùng bên phải.
/ cover: Kích thước của hình ảnh sẽ bao phủ toàn bộ vùng nền.
no-repeat: Không lặp lại hình ảnh nền.
fixed: Hình ảnh nền cố định, không cuộn khi người dùng cuộn trang.

9. Tạo nền nhiều class (Multiple Backgrounds)

CSS cho phép bạn sử dụng nhiều hình ảnh nền trên cùng một phần tử. Các hình ảnh nền được phân tách bằng dấu phẩy và xếp chồng lên nhau, từ hình ảnh đầu tiên (ở dưới cùng) đến hình ảnh cuối cùng (ở trên cùng).

Cú pháp:

css

background-image: url('image1.jpg'), url('image2.png');

Ví dụ:

css

body {
    background-image: url('images/pattern.png'), url('images/background.jpg');
    background-position: center, top right;
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;
}

Trong ví dụ này:

Hình ảnh pattern.png sẽ lặp lại và đặt ở giữa.
Hình ảnh background.jpg sẽ được đặt ở góc trên bên phải, bao phủ toàn bộ vùng nền mà không lặp lại.

10. Ví dụ hoàn chỉnh về các thuộc tính `background`

css

body {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
                url('images/hero.jpg') center / cover no-repeat fixed;
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

h1 {
    color: navy;
    text-align: center;
}

Giải thích:

linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)): Tạo một class nền với gradient màu trắng trong suốt.
url('images/hero.jpg'): Hình ảnh nền chính được đặt ở giữa trang, kích thước là "cover".
no-repeat: Hình ảnh không lặp lại.
fixed: Hình ảnh cố định khi cuộn trang.
background-color: lightblue: Màu nền mặc định nếu hình ảnh không tải được.

11. Kết luận

Việc sử dụng thuộc tính background trong CSS giúp bạn tạo ra các thiết kế trang web đẹp mắt và chuyên nghiệp hơn. Từ màu sắc đơn giản đến hình ảnh phức tạp, CSS cung cấp nhiều công cụ mạnh mẽ để điều chỉnh và tùy chỉnh nền cho các phần tử HTML. Hãy thử kết hợp các thuộc tính background-color, background-image, background-position, và background-size để tạo ra những thiết kế sáng tạo và ấn tượng!

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách làm việc với nền trong CSS. Chúc bạn thành công trong việc áp dụng các kiến thức này vào các dự án của mình!

Support My Work ☕

If you enjoy the tutorials on CodeTutHub, consider buying me a coffee to keep this platform free!

Buy Me a Coffee

Author

I'm Toan Nguyen, a full-stack web developer with over 10 years of experience in designing and developing web systems and applications. I specialize in modern technologies like Laravel, React, Vue.js, and Node.js, and I'm passionate about sharing knowledge through articles, courses, and open-source projects. I want to help the programming community grow stronger by providing detailed, easy-to-understand, and practical guides through a series of articles on codetuthub.com.

Thank you for taking the time to read this article, and I look forward to receiving your feedback to make the content even better. You can connect with me on LinkedIn and Facebook or feel free to leave a comment below!🌟