7 điều cần biết về background image html

Background image html là thành phần không thể thiết trong mỗi trang web. Background image html giúp cho website của bạn trở nên cuốn hút, giữ chân người đọc. Các thuộc tính của nó là gì và cách để thêm background image html như thế nào?

Background image html là gì?

Background image html được sử dụng để chỉ định hình nền trên trang HTML hoặc bảng. Nó có thể được chỉ định cho hầu hết mọi phần tử HTML, trong đó một phần tử không được chỉ định duy nhất là HTML 5.

Bạn có thể chuyển đường dẫn của hình ảnh dưới dạng giá trị của thuộc tính nền để đặt hình ảnh của trang hoặc bảng HTML của mình.

Các thuộc tính của background image html

Một nghiên cứu cho thấy rằng, người đọc chỉ nhớ 20% những gì họ đọc, nhưng lại nhớ đến 80% những gì họ nhìn thấy. Thật chênh lệch phải không?
Vì thế, việc hình ảnh xuất hiện trên một website là một điều đương nhiên, và nó cũng đóng một vai trò hết sức quan trọng. Hình ảnh giúp làm cho nội dung của bạn nhiều thông tin, hấp dẫn và đáng nhớ hơn. Đồng thời, hình ảnh cũng là phần giải thích, minh chứng cho những nội dung của bạn.
Ngoài ra, nó còn giúp tăng cường lượng truy cập khi khách hàng tìm kiếm hình ảnh và truy cập vào trang web của bạn thông qua hình ảnh đó.
Nếu bạn sử dụng nền tảng xây dựng trang web như CMS Hub hoặc WordPress và muốn chèn thêm hình ảnh cho website của mình, bạn chỉ cần nhấp vào biểu tượng hình ảnh trên thanh công cụ. Sau đó, bạn chọn hình ảnh từ trình quản lý tệp của bạn và chèn nó.
Nếu không sử dụng trình tạo, bạn vẫn có thể dễ dàng thêm hình ảnh vào trang web của mình. Bạn chỉ cần biết một số HTML.
Nếu như bạn không sử dụng CMS Hub hay WordPress, để chèn một hình ảnh trong HTML, hãy sử dụng thẻ hình ảnh và bao gồm một nguồn và thuộc tính alt. Lúc này, bạn sẽ cần thêm hình ảnh vào phần nội dung của tệp HTML của mình. Cú pháp có dạng như sau: <img src = “URL” alt = “descriptive text”>
Phần tử hình ảnh HTML là một “phần tử trống”, nghĩa là nó không có thẻ đóng. Không giống như các phần tử như đoạn văn bao gồm thẻ mở và thẻ đóng có nội dung ở giữa, hình ảnh chỉ định nội dung của nó bằng các thuộc tính trong thẻ mở.
Phần tử hình ảnh phải luôn có thuộc tính src (source), thuộc tính này chứa URL hình ảnh hoặc đường dẫn tệp. Nếu không, trình duyệt sẽ không biết kết xuất những gì. Các loại tệp hình ảnh được phép sẽ phụ thuộc vào trình duyệt tải trang, nhưng tất cả các trình duyệt đều cho phép bạn đặt các định dạng phổ biến như .jpeg, .png và .gif, cũng như .svg.
Nếu bạn muốn đặt một hình ảnh được lưu trữ trên máy chủ của mình, bạn có thể sử dụng đường dẫn tệp hình ảnh mà không cần tên trang web hoặc giao thức. Ví dụ: nếu hình ảnh nằm trong một thư mục con được lưu trữ ở cùng một nơi với tệp HTML của bạn.

Thuộc tính img alt

Mặc dù trình duyệt có thể hiển thị hình ảnh mà không có thuộc tính alt, nhưng việc bao gồm thuộc tính này được coi là phương pháp hay nhất. Đó là do thuộc tính này chứa văn bản thay thế hình ảnh.
Văn bản thay thế hình ảnh quan trọng vì một số lý do sau đây:
Đầu tiên, nó sẽ xuất hiện ở vị trí của một hình ảnh nếu hình ảnh không tải được trên màn hình của người dùng.
Thứ hai, nó giúp các công cụ đọc màn hình mô tả hình ảnh cho người đọc bị khiếm thị, những người có thể khó hiểu hình ảnh nếu không có nó.
Thứ ba, văn bản thay thế hình ảnh cho phép các công cụ tìm kiếm thu thập thông tin và xếp hạng trang web của bạn tốt hơn.
Google Hình ảnh là một công cụ tìm kiếm chính của riêng nó và một cách khác để mọi người có thể tìm thấy trang web của bạn. Cung cấp hình ảnh với văn bản thay thế mô tả có thể giúp bạn xếp hạng cho các từ khóa mục tiêu và hướng lưu lượng truy cập đến trang web của bạn.

Thuộc tính kiểu img

Bên cạnh thuộc tính img alt, bạn cũng có thể thấy thuộc tính style bên trong thẻ <img> có chứa chiều rộng và chiều cao của hình ảnh. Việc chỉ định chiều rộng và chiều cao như thế có thể giúp trang web không bị nhấp nháy trong khi tải hình ảnh.
Các thuộc tính chiều rộng và chiều cao img:
Chiều rộng và chiều cao của hình ảnh cũng có thể được chỉ định bằng pixel với các thuộc tính chiều rộng và chiều cao riêng biệt.
Điều này sẽ tạo ra kết quả tương tự như hình ảnh ở trên, trong đó thuộc tính style đã được sử dụng. Sự khác biệt chính giữa các phương pháp này là việc sử dụng các thuộc tính chiều rộng và kiểu dáng riêng biệt sẽ cho trình duyệt biết cần tiết kiệm bao nhiêu dung lượng cho hình ảnh, điều này có thể dẫn đến tải mượt mà hơn (mặc dù điều này cuối cùng sẽ phụ thuộc vào bố cục trang của bạn).

Cách chèn background image html

Nếu bạn muốn đặt hình ảnh làm background image, thay vì chỉ chèn hình ảnh vào trang, bạn sẽ cần sử dụng thuộc tính hình nền CSS. Thuộc tính CSS này đã thay thế thuộc tính background image trong các phiên bản HTML trước. Nó linh hoạt và dễ đoán hơn nhiều so với thuộc tính HTML – và vẫn dễ sử dụng.
Để đặt giá trị của background image html, bạn phải sử dụng cú pháp sau: url (”);

Giữa các dấu ngoặc kép, bạn sẽ đặt URL hình ảnh hoặc đường dẫn tệp.

Cách chèn background image trên trang

Để bắt đầu, giả sử bạn muốn đặt một background image của toàn bộ trang. Trong trường hợp này, bạn sẽ áp dụng CSS cho phần tử body. Sử dụng bộ chọn CSS, bạn có thể xác định thuộc tính hình ảnh nền trong phần đầu của tệp HTML hoặc trong biểu định kiểu bên ngoài.
Việc này sẽ làm cho trang web của bạn bị thừa nhiều khoảng trống, bạn có thể sử dụng thuộc tính kích thước nền và đặt nó để khắc phục điểm này. Sau đó, để hình ảnh không bị cong vênh kích thước, hãy sử dụng thuộc tính background-attachment và đặt nó thành cố định. Bằng cách đó, hình ảnh sẽ giữ được tỷ lệ ban đầu.

Cách chèn background image html

Bạn cũng có thể đặt background image html thay vì toàn bộ trang web.

Ví dụ: bạn có thể đặt các background image html bên trong một div, sau đó nhắm mục tiêu div bằng các thuộc tính CSS. Một điểm khác biệt là thay vì đặt thuộc tính kích thước nền để bao phủ, thuộc tính sẽ được đặt 100% . Điều đó có nghĩa là hình ảnh sẽ kéo dài theo chiều ngang và chiều dọc khi cần thiết để vừa với toàn bộ phần tử div mà không giữ lại kích thước ban đầu của nó.

Cách tạo liên kết trong background image html

Background image html cũng là liên kết hiệu quả – bạn có thể tạo liên kết từ biểu tượng hoặc hình ảnh có độ phân giải cao. Dù bằng cách nào thì quy trình cũng giống nhau: Đính kèm phần tử <img> của bạn trong thẻ <a> (anchor).
Bạn có thể thêm background image html cho trang web trở nên sống động, hút mắt người đọc. Đồng thời, cách thêm background image html này cũng làm cho trang web của bạn được nhớ đến nhiều hơn.

Các tìm kiếm liên quan đến chủ đề “background image html”

Background image full screen	Background image opacity CSS
Background image CSS cover	Background-image: url path
Background-image CSS	Background image full screen CSS
Background-image: url	Background image cover

Bài viết liên quan

Lấy màu trong bảng màu html với 4 công cụ chuyên nghiệp
3 thẻ HTML thông dụng hiện nay là gì?
3 layout web page hàng đầu hiện nay
3 điều cần biết về HTML comment