Trong HTML, chúng ta có thể dễ dàng thêm hình nền vào tài liệu Html sẽ được hiển thị trên trang web bằng hai phương pháp khác nhau sau đây
- Sử dụng thuộc tính Nền [Thẻ Html]
- Sử dụng Biểu định kiểu nội bộ
Sử dụng thuộc tính Nền
Ghi chú. HTML 5 không hỗ trợ thuộc tính nền của thẻ, vì vậy chúng tôi phải sử dụng tùy chọn CSS nội bộ để thêm nền trong tài liệu Html
Nếu chúng ta muốn thêm hình nền vào tài liệu Html bằng thuộc tính Nền thì chúng ta phải làm theo các bước được đưa ra bên dưới. Sử dụng các bước này, chúng ta có thể dễ dàng xem một hình ảnh trên trang web
Bước 1. Đầu tiên, chúng tôi phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng tôi muốn sử dụng thuộc tính nền
Bước 2. Bây giờ, hãy di chuyển con trỏ trong thẻ bắt đầu trong tài liệu Html của chúng tôi. Và, sau đó nhập thuộc tính nền như được hiển thị trong khối sau
Bước 3. Sau đó, chúng ta phải đưa ra đường dẫn của hình ảnh mà chúng ta muốn thêm. Vì vậy, hãy nhập đường dẫn của hình ảnh trong thuộc tính nền. Nếu hình ảnh của chúng tôi được lưu trữ trong cùng thư mục lưu trữ tệp HTML, hãy nhập đường dẫn sau
Nếu hình ảnh của chúng tôi được lưu trữ trong bất kỳ thư mục nào khác, hãy nhập đúng đường dẫn của hình ảnh đó, để trình duyệt có thể đọc hình ảnh dễ dàng như được mô tả trong khối sau
Nếu hình ảnh của chúng tôi có trên internet thì chúng tôi cũng có thể thêm hình ảnh bằng cách sử dụng URL, như được cung cấp trong khối sau
Bước 4. Cuối cùng, chúng ta phải lưu tệp Html hoặc Mã Html trong trình soạn thảo văn bản
Kiểm tra nó ngay bây giờĐầu ra của đoạn mã trên được hiển thị trong ảnh chụp màn hình sau
Try it Yourself »Background Image on a Page
If you want the entire page to have a background image, you must specify the background image on the element:
Example
Add a background image for the entire page:
Try it Yourself »Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:
Example
Try it Yourself »To avoid the background image from repeating itself, set the background-repeat cho no-repeat
Thí dụ
Tự mình thử »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 tính background-size 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 tính background-attachment thành fixed:
Bằng cách này, hình nền sẽ bao phủ toàn bộ phần tử, không bị giãn [hình ảnh sẽ giữ nguyên tỷ lệ ban đầu]
Thí dụ
Tự mình thử »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ộ thành phần, bạn có thể đặt thuộc tính background-size thành background-image0
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ộ thành phần
Thí dụ
Tự mình thử »Tìm hiểu thêm CSS
Từ các ví dụ trên, bạn đã học được rằng có thể tạo kiểu cho ảnh nền bằng cách sử dụng thuộc tính nền CSS