Thuộc tính hình nền CSS thay đổi nền của trang web thành hình ảnh. Hình nền được đặt bằng thuộc tính background-image:url (url_of_image). Bạn có thể chỉ định nhiều hình nền chồng lên nhau bằng cách sử dụng thuộc tính background-image.
Hình nền là một tính năng phổ biến trên các trang web hiện đại, tạo ra trải nghiệm người dùng có tính thẩm mỹ. Các nhà thiết kế web tùy chỉnh tính năng này dựa trên các chủ đề duy nhất được xác định trước thông qua thuộc tính hình ảnh nền CSS.
Hướng dẫn và ví dụ này sẽ giúp bạn làm quen với thuộc tính CSS này. Đến cuối bài viết này, bạn sẽ là một chuyên gia về tùy chỉnh hình ảnh nền.
Hình nền CSS
Thuộc tính background-image xác định hình ảnh làm nền cho một phần tử trên trang web. Nó thường được sử dụng để đặt nền của toàn bộ trang hoặc một phần của trang.
Khi bạn thiết kế một trang web, bạn phải xác định xem sản phẩm cuối cùng sẽ có hình nền hay không.
Ví dụ:bạn có thể muốn có ảnh nhóm của các thành viên trong nhóm trong nền nếu bạn đang thiết kế trang "Giới thiệu về chúng tôi". Nếu bạn đang thiết kế trang web cho một quán cà phê, hãy xem xét thêm tiêu đề trên trang hiển thị hình ảnh một tách cà phê.
Thuộc tính background-image thêm hình ảnh làm nền cho phần tử HTML. Bạn có thể thêm hình nền vào một phần tử bằng cú pháp sau:
background-image: url(imageUrl);
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
imageUrl đề cập đến vị trí của hình ảnh bạn muốn hiển thị.
Ví dụ về hình ảnh nền CSS
Chúng tôi đang thực hiện một dự án thiết kế trang web cho một quán cà phê địa phương có tên là "The Coffee Grind". Quán cà phê đã yêu cầu chúng tôi tạo một biểu ngữ trên đầu trang, hiển thị hình ảnh có sẵn về một tách cà phê. Biểu ngữ này có dòng chữ ‘Chào mừng đến với The Coffee Grind’ ở trung tâm.
Chúng tôi có thể tạo biểu ngữ bằng mã sau:
index.html
<div class="image">
<p class="header">Welcome to The Coffee Grind</p>
</div>
styles.css
.image {
background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
height: 250px;
}
.header {
padding-top: 50px;
color: white;
font-size: 20px;
text-align: center;
}
Mã của chúng tôi trả về:
Hãy để chúng tôi chia nhỏ mã của chúng tôi. Trong tệp HTML của chúng tôi, chúng tôi đã xác định thẻ
Trong tệp CSS của mình, chúng tôi đã xác định quy tắc cho một lớp HTML được gọi là “hình ảnh”. Điều này đặt hình nền cho biểu ngữ của chúng tôi và đặt chiều cao của biểu ngữ của chúng tôi là 250px. Sau đó, chúng tôi xác định một lớp được gọi là “tiêu đề”, được sử dụng để tạo kiểu cho văn bản trong tiêu đề của chúng tôi.
Lớp “tiêu đề” áp dụng đệm 50px cho đầu văn bản tiêu đề của chúng tôi. Lớp "tiêu đề" đặt màu của văn bản thành màu trắng. Các kiểu của chúng tôi đặt kích thước phông chữ của tiêu đề thành 20px và căn chỉnh tiêu đề ở giữa phần tử.
CSS Nhiều hình nền
Thuộc tính background-image cho phép bạn gán nhiều hình nền cho một phần tử trong CSS. Cú pháp để sử dụng nhiều hình nền như sau:
background-image: url(image1), url(image2);
Hình ảnh đầu tiên được chỉ định sẽ xuất hiện ở trên cùng của phần tử và các phần tử tiếp theo sẽ xuất hiện phía sau nhau. Giả sử chúng tôi muốn thêm biểu tượng một tách cà phê vào phía trước biểu ngữ của mình. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
index.html
<div class="image">
<p class="header">Welcome to The Coffee Grind</p>
</div>
styles.css
.image {
background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
height: 250px;
}
.header {
padding-top: 50px;
color: white;
font-size: 20px;
text-align: center;
}
Mã của chúng tôi trả về:
Như bạn có thể thấy, biểu tượng cốc cà phê của chúng tôi đã được thêm vào phía trước hình nền của chúng tôi. Biểu tượng của chúng tôi chỉ xuất hiện ở phía trước vì chúng tôi đã chỉ định nó làm hình nền đầu tiên trong danh sách hình nền của chúng tôi.
Kích thước hình nền
Khi bạn đang làm việc với thuộc tính background-image, bạn có thể muốn tùy chỉnh kích thước của hình nền trong vùng chứa của nó. Thuộc tính kích thước nền được sử dụng cho mục đích này.
Thuộc tính kích thước nền chấp nhận bốn giá trị có thể. Đây là:
- Tự động:Giá trị này cho trình duyệt web quyết định kích thước tốt nhất cho hình nền (mặc định).
- Chứa:Giá trị này hướng dẫn trình duyệt rằng kích thước hình ảnh thực tế sẽ hiển thị ngay cả khi nó không lấp đầy vùng chứa. Nếu một hình ảnh quá nhỏ để lấp đầy một vùng chứa, nó sẽ xuất hiện ở kích thước đầy đủ. Khoảng trắng sẽ được để lại ở những vùng mà hình ảnh không thể lấp đầy.
- Bìa:Giá trị này hướng dẫn trình duyệt kéo dài hình ảnh bằng kích thước của toàn bộ vùng chứa.
- Chiều dài:Đây là chiều rộng và chiều cao của hình nền. Giá trị đầu tiên được chỉ định đặt chiều rộng của hình ảnh và giá trị thứ hai được chỉ định đặt chiều cao.
Thay đổi kích thước nền
Giả sử chúng tôi muốn hình ảnh biểu ngữ cà phê của chúng tôi trước đó được chứa trong phần tử của chúng tôi. Điều này có nghĩa là hình ảnh đầy đủ sẽ hiển thị, ngay cả khi nó không lấp đầy vùng chứa. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
index.html
<div class="image"></div>
styles.css
.image {
background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
background-size: contain;
height: 250px;
}
Mã của chúng tôi trả về:
Như bạn có thể thấy, không giống như ví dụ đầu tiên của chúng tôi, toàn bộ hình nền của chúng tôi có thể nhìn thấy được. Điều này là do chúng tôi đã chỉ định thuộc tính background-size trong mã của mình và đặt giá trị của nó thành chứa . Ngoài ra, chúng tôi có thể đã sử dụng bìa giá trị nếu chúng tôi muốn hình ảnh của mình bao phủ hết kích thước của toàn bộ vùng chứa.
Bạn cũng có thể chỉ định kích thước pixel cho hình ảnh. Giả sử chúng tôi muốn hình ảnh kiểu của mình cao 200px x rộng 200px. Chúng tôi có thể làm như vậy bằng cách sử dụng mã sau:
index.html
<div class="image"></div>
styles.css
.image {
background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
background-size: contain;
height: 200px;
width: 200px;
}
Mã của chúng tôi trả về:
Trong ví dụ này, hình ảnh của chúng tôi có chiều rộng 200px x chiều dài 200px.
Hình nền vị trí
Thuộc tính background-origin cho phép bạn định vị hình nền theo nội dung, đường viền hoặc phần đệm của phần tử web.
Thuộc tính background-origin chấp nhận ba giá trị tiềm năng:
- Hộp viền:Định vị hình ảnh xuất hiện so với hộp viền.
- Hộp nội dung:Định vị hình ảnh xuất hiện so với hộp nội dung.
- Hộp đệm:Định vị hình ảnh xuất hiện so với hộp đệm (mặc định).
Để tìm hiểu thêm về đường viền, nội dung và phần đệm, hãy đọc hướng dẫn của chúng tôi về mô hình hộp CSS.
Giả sử rằng chúng tôi muốn điều chỉnh vị trí của hình ảnh của mình. Ví dụ:bạn có thể tạo hình nền xuất hiện liên quan đến hộp nội dung bằng cách sử dụng mã sau:
index.html
<div class="image"></div>
styles.css
.image {
background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
border: 10px solid black;
padding: 25px;
background-origin: content-box;
background-repeat: no-repeat;
height: 250px;
}
Mã của chúng tôi trả về:
Trong ví dụ này, hình nền của chúng ta xuất hiện so với hộp nội dung. Như bạn có thể thấy, có một khoảng trắng giữa đường viền hình ảnh của chúng ta và hình nền. Điều này cho thấy vị trí nền tương đối mà hình ảnh của chúng tôi xuất hiện.
Chúng tôi đã đạt được điều này bằng cách chỉ định thuộc tính background-origin:content-box. Chúng tôi đã chỉ định thuộc tính background-repeat:no-repeat. Thuộc tính này giới hạn hình ảnh của chúng tôi trong hộp nội dung của nó. Hình ảnh sẽ không xuất hiện trong khoảng trống được tạo bởi thuộc tính background-origin.
Kết luận
Chúng tôi sử dụng thuộc tính background-image để đặt nền của một phần tử thành hình ảnh trong CSS. Kỹ thuật này cho phép bạn tạo hình nền tùy chỉnh từ hình ảnh. Đây là một giải pháp thay thế cho việc sử dụng màu sắc hoặc độ chuyển màu.
Trong bài viết này, chúng ta đã thảo luận về cách sử dụng thuộc tính background-image và cách tạo kiểu cho hình nền trong CSS. Bây giờ bạn đã có kiến thức cần thiết để bắt đầu thiết kế hình ảnh nền trong CSS như một chuyên gia.