Tiếp theo, chúng ta sẽ tìm hiểu về HTML Background Image code, mã để thiết lập một hình ảnh nền trên một phần tử HTML.

Quan trọng hơn, nó cũng cung cấp các mã CSS  cho một hình ảnh nền. Phương pháp CSS được khuyến khích vì nó mạnh hơn.

CSS cho phép bạn thiết lập một hình nền cho bất kỳ phần tử HTML nào. Thêm vào đó bạn có thể xác định vị trí của nó.

Ví dụ về Background Image

Ở đây, chúng tôi áp dụng một hình ảnh nền cho một <div> phần tử.

q1

Không-Lặp lại

Ở đây, chúng tôi thiết lập các hình nền để background-repeat:no-repeat. Điều này ngăn cản các hình ảnh lặp đi lặp lại (trong trường hợp hình ảnh nhỏ hơn so với các phần tử). Bạn cũng có thể sử dụng repeat-xrepeat-y để làm cho nền lặp lại chỉ theo chiều ngang hoặc theo chiều dọc.

q2

Toàn bộ trang

Các mã sau chỉ định một hình ảnh nền cho toàn bộ trang (thông qua thẻ ‘body’). Chúng tôi định vị hình ảnh ở trung tâm của trang và ngăn chặn nó từ lặp đi lặp lại trên trang.

q3

q4

Thậm chí tốt hơn, bạn có thể sử dụng CSS background để thiết lập tất cả các tính chất nền cùng một lúc. Do đó, chúng ta có thể viết lại đoạn mã trên như sau:

q5

q6

Trường hợp tôi đặt mã?

Để áp dụng các hình ảnh nền cho mỗi trang trên trang web của bạn, đưa mã vào một sheet bên ngoài .

Nếu bạn muốn hình nền để chỉ xuất hiện trên một trang duy nhất, bao quanh mã của thẻ <style>, và diễn ra giữa các tài liệu của thẻ <head>.

More Background Properties

Đây là một danh sách đầy đủ các tính chất nền CSS bạn có thể áp dụng cho các thành phần HTML của bạn:

  • background (Viết tắt cho tất cả các tính chất nền)
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat

Xem thêm: Kiến thức HTML Bài 1: HTML Background Code

Còn nhiều bài viết hữu ích tại thiết kế web các bạn đón đọc nhé.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *