Thuộc Tính Background Image Trong CSS, Ví Dụ, Cách Dùng

CSS là ngôn ngữ lập trình được sử dụng rộng rãi trong thiết kế và tạo kiểu cho các trang web. Với nhiều thuộc tính và tính năng linh hoạt, CSS cho phép người dùng tạo ra các trang web hấp dẫn và chuyên nghiệp. Một trong những điểm đặc biệt của CSS là khả năng chèn ảnh làm background cho các phần tử trên trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về thuộc tính background image trong CSS và cách sử dụng nó để tạo hiệu ứng đẹp mắt cho trang web của bạn.

Thuộc tính background image trong CSS

Dưới đây là một ví dụ đầy đủ về cách sử dụng thuộc tính background-image trong CSS để đặt hình nền cho một phần tử:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Image Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome</h1>
<p>This is an example of a background image.</p>
</div>
</body>
</html>

CSS

/* Reset some default browser styles */
body, h1, p {
margin: 0;
padding: 0;
}

/* Apply styles to the container */
.container {
width: 100%;
height: 400px;
background-image: url('https://via.placeholder.com/800x400'); /* Link đến hình ảnh */
background-size: cover; /* Hiển thị hình ảnh đầy đủ kích thước, tự động điều chỉnh kích thước để che phủ toàn bộ phần tử */
background-position: center; /* Canh chỉnh hình ảnh vào trung tâm */
color: #fff; /* Màu chữ trắng để tương phản với hình nền */
text-align: center; /* Canh chỉnh văn bản vào giữa */
padding: 50px;
}

/* Style the heading */
h1 {
font-size: 2.5em;
margin-bottom: 20px;
}

/* Style the paragraph */
p {
font-size: 1.2em;
}

Trong ví dụ này:

HTML đơn giản với một phần tử <div> có lớp .container chứa một tiêu đề <h1> và một đoạn văn bản <p>.
Trong CSS, background-image được sử dụng để đặt hình ảnh nền cho phần tử .container. background-size: cover; điều chỉnh kích thước hình ảnh để che phủ toàn bộ phần tử. background-position: center; canh chỉnh hình ảnh vào trung tâm. Màu chữ được thiết lập là trắng để tương phản với hình nền.

Hình ảnh được sử dụng trong ví dụ này là một placeholder từ https://via.placeholder.com/800x400, bạn có thể thay đổi link đến hình ảnh của bạn để áp dụng hình ảnh nền cho phần tử .container.

Chèn ảnh làm background trong CSS

Bước 1: Chuẩn bị hình ảnh

Đầu tiên, bạn cần có một hình ảnh để sử dụng làm background. Hình ảnh này có thể là một hình ảnh bạn tạo ra hoặc một hình ảnh từ nguồn tài nguyên như Unsplash, Pexels hoặc bất kỳ nguồn nào khác.

Bước 2: Tải hình ảnh và lưu trữ

Tải hình ảnh về máy tính của bạn và đảm bảo rằng bạn lưu trữ hình ảnh trong cùng thư mục hoặc thư mục con với file CSS bạn đang sử dụng.

Bước 3: Chuẩn bị mã CSS

/* Định nghĩa một lớp hoặc chọn phần tử muốn áp dụng hình ảnh làm background */
.background-container {
width: 100%; /* Định rộng phần tử chứa background */
height: 500px; /* Định chiều cao phần tử chứa background */
background-image: url('ten_file_hinh_anh.jpg'); /* Đường dẫn tới file hình ảnh */
background-size: cover; /* Hiển thị hình ảnh đầy đủ kích thước, tự động điều chỉnh kích thước để che phủ toàn bộ phần tử */
background-position: center; /* Canh chỉnh hình ảnh vào trung tâm */
color: #fff; /* Màu chữ trắng để tương phản với hình nền */
text-align: center; /* Canh chỉnh văn bản vào giữa */
padding: 50px; /* Tạo khoảng cách với nội dung bên trong phần tử */
}

Bước 4: Sử dụng lớp hoặc chọn phần tử

Áp dụng lớp .background-container vào một phần tử HTML hoặc sử dụng một chọn phần tử trong tài liệu HTML của bạn:

<div class="background-container">
<!-- Nội dung bạn muốn hiển thị trên background -->
<h1>Background Image</h1>
<p>Đây là nội dung nằm trên hình nền.</p>
</div>

Bước 5: Kiểm tra hiển thị

Mở trình duyệt và kiểm tra xem hình ảnh đã được áp dụng làm background cho phần tử đó hay chưa.

Qua các bước này, bạn sẽ có thể áp dụng hình ảnh làm background cho một phần tử trong trang web của mình bằng cách sử dụng CSS.

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu về thuộc tính background image trong CSS và cách sử dụng nó để chèn ảnh làm background cho các phần tử HTML. Với khả năng linh hoạt và dễ dàng thiết lập, thuộc tính này giúp tạo ra các hiệu ứng đẹp mắt cho trang web và tăng tính chuyên nghiệp của giao diện. Hy vọng bạn đã có thể áp dụng được kiến thức này vào thiết kế website của mình. Chúc bạn thành công!

CSS

Background Image trong CSS