Thêm hình nền trong WordPress

Hướng dẫn thêm hình nền trong WordPress

Hình nền có thể được sử dụng để tăng tính thẩm mỹ cho trang web, tạo điểm nhấn thu hút khách truy cập.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách thêm hình nền vào trang web WordPress với thao tác đơn giản, nhanh chóng.

Cách 1. Thêm hình nền bằng cách sử dụng Cài đặt WordPress Theme

Hầu hết các theme WordPress phổ biến hiện nay đều hỗ trợ tính năng cho phép bạn dễ dàng tùy chỉnh hình nền cho trang web.

Đầu tiên bạn truy cập Appearance » Customize trong trang quản trị để vào chế độ Tùy chỉnh website. Tiếp đến, bạn chọn mục Background Image.

Click vào nút Select image để chọn hình nền có sẵn trong thư viện ảnh hoặc tải lên từ máy tính của bạn.

Tải ảnh lên từ thư viện hoặc máy tính

Sau khi lựa chọn hình nền, trang web sẽ hiển thị nội dung xem thử (Preview) tại cửa sổ bên phải.

Nếu chưa ưng ý, bạn có thể gỡ hình nền (ấn nút Remove) hoặc thay đổi hình khác (ấn nút Change image).

Dưới mục Preset còn cung cấp tùy chọn cho phép bạn đặt chế độ hiển thị hình nền gồm: fill screen (tràn màn hình), fit screen (vừa đúng màn hình), repeat (lặp lại) hoặc custom (tự tùy chỉnh).

Sau khi hoàn thành, bạn ấn nút Publish để lưu thay đổi. Vậy là xong rồi đó.

Cách 2. Thêm hình nền bằng cách sử dụng plugin

Cách này áp dụng đối với những theme không tích hợp sẵn tính năng tùy chỉnh hình nền.

So với cách 1 thì sử dụng plugin thuận tiện hơn nhiều bởi tương thích với mọi theme và cho phép bạn cài đặt nhiều hình nền với tùy chọn màu, ảnh, video (bao gồm cả YouTube và Vimeo). 

Bạn cũng có thể đặt hình nền cho bất kỳ bài viết, danh mục hay trang của website. Bên cạnh đó, sử dụng plugin cũng giúp giải quyết vấn đề tương thích với màn hình các thiết bị khác nhau (iPad, iPhone, Samsung..).Đầu tiên, bạn tìm và tải về plugin Advanced WordPress Backgrounds trong trang back-end WordPress hoặc tại địa chỉ này, sau đó cài đặt, kích hoạt để sử dụng.

Gợi ý: Plugin Advanced WordPress Backgrounds tương thích và hoạt động tốt với trình soạn thảo Gutenbergn (được WordPress giới thiệu từ phiên bản 5.0), giúp dễ dàng thêm hình nền cho từng bài viết/trang.

Cách 3. Thêm hình nền bằng cách sử dụng CSS

Khi xem mã nguồn trang web hiển thị, bạn sẽ thấy mặc định WordPress thêm một số lớp CSS vào trong các thẻ HTML. Điều này giúp bạn dễ dàng tùy chỉnh hình nền cho bất kì bài viết, trang, sản phẩm…

Ví dụ, bạn vừa tạo một danh mục bài viết với tên gọi TV, lúc này WordPress sẽ tự động thêm các lớp CSS sau vào trong thẻ body như thế này:

<body class="archive category category-tv category-4">
Bạn có thể sử dụng công cụ xem mã nguồn tích hợp sẵn trong trình duyệt (mình sử dụng Chrome) để xem chính xác nội dung thẻ body.

Ở đây có 2 lớp CSS mà bạn có thể sử dụng là category-tvcategory-4.

Hãy sử dụng công cụ tùy chỉnh CSS tích hợp sẵn trong WordPress để thêm hình nền cho danh mục bài viết TV. Hãy cùng xem ví dụ sau:

body.category-tv { 
background-image: url("https://example.com/wp-content/uploads/2020/08/your-background-image.jpg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Đừng quên thay thế link hình nền trong đoạn code CSS trên nhé.

Hy vọng với một số cách thay đổi hình nền trong WordPress sẽ giúp xây dựng website mang cá tính của riêng bạn!

Leave a Comment

Email 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 *