Làm việc với hình ảnh nền trong CSS có thể khá棘手. Dù bạn đã thiết lập trong code, vẫn có các yếu tố khác ngăn background-image hiển thị trên trang.
Để giúp bạn xử lý, đây là 4 cách khắc phục lỗi background-image không hoạt động, sử dụng HTML và CSS:
1. Kiểm tra file CSS được liên kết đúng trong file HTML
Để các kiểu CSS được tải, bạn cần thêm thẻ <link> trong file HTML. Thẻ này phải nằm trong cặp thẻ <head></head>, và trông như sau:
<link rel="stylesheet" href="/style.css">Làm sao biết file CSS đã tải đúng?
Một dấu hiệu là khi tải trang, nền trắng, chữ Times New Roman, không có màu sắc hay kiểu dáng nào.
Bạn cũng có thể kiểm tra công cụ Inspect của trình duyệt (chuột phải chọn "Inspect" hoặc Ctrl-Shift-I). Nếu thấy lỗi 404 not found cho file CSS, hoặc The resource... was blocked due to MIME type mismatch, nghĩa là có vấn đề khi tải CSS.
Nếu thấy lỗi này và trang web trông không có kiểu dáng, hãy kiểm tra trước thẻ <link>. Đảm bảo thuộc tính href trỏ đúng tên file CSS thực tế và đường dẫn chính xác.
Đường dẫn phải tương đối so với vị trí file HTML. Nếu file CSS cùng thư mục với HTML, bạn đặt href="style.css" (hoặc tên file thực tế).
Tôi thường thêm dấu gạch chéo / trước đường dẫn, ví dụ: href="/style.css". Điều này đảm bảo đường dẫn bắt đầu từ gốc trang web.
Cách này hữu ích khi bạn có các trang trong thư mục con khác nhau nhưng cùng tải code <head> chung. Ví dụ: dùng CMS có code dùng chung.
2. Đảm bảo đường dẫn ảnh đúng trong background-image url
Sau khi xác nhận CSS tải đúng, hãy kiểm tra đường dẫn ảnh. Mở công cụ Inspect trong trình duyệt để kiểm tra.
Làm sao biết background-image tải đúng?
Nếu ảnh nền không load và thấy lỗi 404 cho ảnh trong Inspect, đó là dấu hiệu có vấn đề với ảnh.
Nếu vậy, hãy kiểm tra kỹ tên file ảnh khớp với file thực tế, và đường dẫn trong background-image: url() trỏ đúng vị trí.
Vị trí file ảnh phải tương đối so với file CSS, không phải gốc trang web. Nếu file CSS ở thư mục con, đường dẫn có thể khác so với khi CSS ở gốc.
Ví dụ cấu trúc thư mục:
(thư mục dự án) |-- index.html |-- (css) |-- style.css |-- (img) |-- cat-pic-1.jpgTrang web có index.html ở gốc, thư mục css chứa style.css, thư mục img chứa cat-pic-1.jpg.
Trong CSS, để load cat-pic-1.jpg làm background, đường dẫn cần:
- Lên một cấp khỏi thư mục
css - Vào thư mục
img - Tải file ảnh
Thuộc tính background-image trong CSS nên viết: background-image: url('../img/cat-pic-1.jpg').
Ký hiệu ../ nghĩa là lên một cấp trong cấu trúc thư mục.
Bạn cũng có thể viết: background-image: url('/img/cat-pic-1.jpg').
Cách này dùng dấu gạch chéo / để bắt đầu từ gốc trang web, rồi vào thư mục img tải ảnh.
Dù đi lên thư mục cha hay bắt đầu từ gốc, hãy dùng công cụ Inspect để kiểm tra xem ảnh load được hay báo 404.
3. Thiết lập rõ ràng width và/hoặc height cho element
Nếu ảnh không hiện nhưng không có lỗi 404, hãy dùng Inspect kiểm tra chính element đó.
Nếu element không có nội dung HTML, nó có thể có width hoặc height bằng 0 (hoặc cả hai). Điều này khiến element vô hình dù background-image đã tải đúng.
Trong ví dụ trên, khi hover vào element .card__image bên phải, nhãn hiện ra bên trái cho thấy width 354px và height 0px.
Height 0px khiến element không hiển thị.
Để sửa, hãy thiết lập rõ height cho element .card__image là height: 120px. Nếu element có nội dung text độ dài thay đổi, dùng min-height: 120px để nó tối thiểu 120px nhưng có thể cao hơn nếu nội dung cần.
4. Đảm bảo cú pháp đúng cho các thuộc tính background trong CSS
Điều cuối cùng cần kiểm tra là cú pháp các thuộc tính background CSS.
Dưới đây là các thuộc tính thường dùng và giá trị có thể:
background-color: #000000;background-image: url("/landscape1.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;
Bạn cũng có thể dùng shorthand background gộp tất cả vào một quy tắc:
background: #000 center/cover url("/img/landscape1.jpg") no-repeat;Nếu dùng shorthand với nhiều giá trị, hãy đảm bảo cú pháp đúng. Thứ tự các thuộc tính background không quan trọng, nhưng có một cạm bẫy với background-size.
Giá trị background-size chỉ được dùng nếu nó ngay sau background-position, với dấu gạch chéo / giữa chúng. Trong ví dụ là center/cover, trong đó center là background-position và cover là background-size.
Bạn có thể dùng background-position đơn lẻ, nhưng nếu chỉ dùng cover một mình, quy tắc CSS sẽ vô hiệu và tất cả thuộc tính background đều không hoạt động.
Nếu xảy ra vậy, bạn sẽ thấy quy tắc vô hiệu trong Inspect như sau:
