Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

Hình nền HTML


Hình nền có thể được chỉ định cho hầu hết mọi phần tử HTML.


Hình nền trên một phần tử HTML

Để thêm hình nền trên một phần tử HTML, hãy sử dụng stylethuộc tính HTML và thuộc tính CSS background-image:

Thí dụ

Thêm hình nền trên phần tử HTML:

<div style="background-image: url('img_girl.jpg');">

Bạn cũng có thể chỉ định hình nền trong <style> phần tử, trong <head> phần:

Thí dụ

Chỉ định hình nền trong <style> phần tử:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>

Hình nền trên một trang

Nếu bạn muốn toàn bộ trang có hình nền, bạn phải chỉ định hình nền trên <body>phần tử:

Thí dụ

Thêm hình nền cho toàn bộ trang:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

Bối cảnh Lặp lại

Nếu hình nền nhỏ hơn phần tử, hình ảnh sẽ tự lặp lại, theo chiều ngang và chiều dọc, cho đến khi nó đến cuối phần tử:

Thí dụ

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

Để tránh hình nền tự lặp lại, hãy đặt thuộc background-repeattính thành no-repeat.

Thí dụ

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

Bìa nền

Nếu bạn muốn hình nền bao phủ toàn bộ phần tử, bạn có thể đặt thuộc background-sizetính thành cover.

Ngoài ra, để đảm bảo toàn bộ phần tử luôn được bao phủ, hãy đặt thuộc background-attachmenttính thànhfixed:

Bằng cách này, hình nền sẽ bao phủ toàn bộ phần tử mà không bị kéo giãn (hình ảnh sẽ giữ nguyên tỷ lệ ban đầu):

Thí dụ

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Căng nền

Nếu bạn muốn hình nền kéo dài để vừa với toàn bộ phần tử, bạn có thể đặt thuộc background-sizetính thành 100% 100%:

Hãy thử thay đổi kích thước cửa sổ trình duyệt, và bạn sẽ thấy rằng hình ảnh sẽ kéo dài, nhưng luôn bao phủ toàn bộ phần tử.

Thí dụ

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Tìm hiểu thêm CSS

Từ các ví dụ trên, bạn đã biết rằng hình nền có thể được tạo kiểu bằng cách sử dụng các thuộc tính nền CSS.

Để tìm hiểu thêm về các thuộc tính nền CSS, hãy nghiên cứu Hướng dẫn nền CSS của chúng tôi .