Mã HTML để thêm hình nền là gì?

Bài viết này cung cấp code ảnh nền HTML - mã đặt ảnh nền trên phần tử HTML

Nội dung chính Show

Ví dụ hình nền
Không lặp lại
Toàn bộ trang
Tôi đặt mã ở đâu?
Nếu Hình nền Nhỏ hơn Cửa sổ Trình duyệt thì sao?
Tóm lược
Mã để chèn hình nền trong HTML là gì?
Làm cách nào để thêm hình nền trong HTML CSS?

Trong HTML, hình nền được đặt bằng CSS. CSS cho phép bạn đặt hình nền cho bất kỳ phần tử HTML nào. Ngoài ra, bạn có thể chỉ định vị trí của nó, liệu nó có lặp lại trên toàn trang hay không, nó sẽ lặp lại như thế nào, v.v.

Ví dụ hình nền

Ở đây, chúng tôi áp dụng hình nền cho phần tử

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Không lặp lại

Ở đây, chúng tôi đặt hình nền thành background-repeat:no-repeat. Điều này ngăn hình ảnh lặp lại trên phần tử (trong trường hợp hình ảnh nhỏ hơn phần tử). Bạn cũng có thể sử dụng repeat-x và repeat-y để chỉ lặp lại nền theo chiều ngang hoặc chiều dọc. Để biết thêm thông tin, hãy xem thuộc tính CSS background-repeat

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Toàn bộ trang

Đoạn mã sau chỉ định hình nền cho toàn bộ trang (thông qua thẻ 'body'). Chúng tôi đặt hình ảnh ở giữa trang và ngăn hình ảnh lặp lại trên trang

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Tốt hơn nữa, bạn có thể sử dụng thuộc tính CSS background để đặt tất cả các thuộc tính nền cùng một lúc. Do đó, chúng ta có thể viết lại đoạn mã trên thành

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Tôi đặt mã ở đâu?

Để áp dụng hình nền cho mọi trang trên trang web của bạn, hãy đặt mã vào biểu định kiểu bên ngoài

Nếu bạn muốn hình nền chỉ xuất hiện trên một trang, hãy bao quanh mã bằng các thẻ