Cách thêm hình nền vào trang web: 14 bước (có hình ảnh)

2024 Tác giả: Gilbert Ryder | [email protected]. Sửa đổi lần cuối: 2024-01-31 09:05

Nền là một trong những yếu tố quan trọng nhất của một trang web. Một nền tốt tạo ra âm điệu cho trang web và bổ sung cho nội dung. Có nhiều cách khác nhau để thêm nền, mỗi cách với một mục đích khác nhau. Một số phương pháp cho phép bạn áp dụng nền cho tất cả các trang trong trang web, trong khi những phương pháp khác giới hạn nền chỉ cho một trang nhất định. Bài viết này hướng dẫn bạn cách thêm nền vào trang web của mình bằng HTML hoặc CSS.

Các bước

Phương pháp 1/2: Phương pháp HTML

Nền màu rắn

Bước 1. Nền đồng màu là loại nền cơ bản nhất mà bạn có thể đặt trên trang web

Trên thực tế, mọi trang web đều bắt đầu với nền trắng mặc định. Tuy nhiên, trong khi nền trắng có thể trông rất bóng bẩy và sạch sẽ khi được sử dụng với cách phối màu hài hòa, thì một nền có màu khác có thể được ưa chuộng với các chủ đề khác nhau.

Bước 2. Mở mã web của bạn (nguồn)

Bước 3. Trong thẻ body, thêm một thuộc tính gọi là bgcolor

Bây giờ, thẻ nội dung của bạn sẽ trông như thế này-

trong đó COLORNAME là tên của màu. COLORNAME có thể được lấp đầy bằng nhiều loại màu đại diện-

(tên màu)
(giá trị hex)
(Giá trị RGB)

Bước 4. Thử nghiệm với RGB và # có thể dẫn đến nhiều sắc thái, nhưng bạn có thể thực hiện cách đầu tiên dễ dàng

Nhưng hãy nhớ rằng nhập một màu không phổ biến như "Xanh lam nhạt" sẽ dẫn đến màu trắng.

Thêm hình nền

Thêm hình nền phức tạp hơn một chút so với nền có màu đồng nhất

Bước 1. Thêm thuộc tính nền vào thẻ body, vì vậy nó trông giống như thế này-

trong đó SRC là nguồn của hình ảnh SRC có thể nằm trong cùng một thư mục hoặc một thư mục / trang web khác.

(trong cùng một thư mục)
(bên trong một thư mục khác)
(trong một trang web khác)

Bước 2. Nhớ gõ phần mở rộng.gif /-j.webp" />

Phương pháp 2/2: Phương thức CSS

Nền màu rắn

Bước 1. Để thêm nền có màu đồng nhất trong CSS, hãy thêm thuộc tính style

Bạn cũng có thể cung cấp ID và Lớp và sử dụng cả bảng định kiểu bên ngoài và bên trong.

Bước 2. Thẻ body của bạn sẽ trông như thế này-

trong đó COLORNAME là tên của màu, giá trị hex hoặc RGB (Ngoài ra, hãy nhớ các bước cuối cùng của nền màu đồng nhất trong HTML, các bước này cũng có thể áp dụng ở đây).

Thêm hình ảnh

Bước 1. Để thêm hình ảnh, hãy thêm thuộc tính style vào thẻ body

Bạn cũng có thể cung cấp ID và Lớp và sử dụng cả bảng định kiểu bên ngoài và bên trong.

Bước 2. Thẻ body của bạn bây giờ sẽ trông như thế này-

Bước 3. Hãy nhớ rằng SRC là nguồn

Nó có thể từ cùng một thư mục, thư mục khác nhau hoặc một trang web khác.

(trong cùng một thư mục)
(bên trong một thư mục khác)
(trong một trang web khác).

Bước 4. Nhớ thêm.extensions nữa

Nền có hoa văn lặp lại

Bước 1. Để tạo một nền mẫu lặp lại, hãy thêm một nền như đã nói trong các bước ở trên

Thẻ body của bạn bây giờ phải được thay đổi thành-

Trong đó REPEAT-SETTINGS là cài đặt. Có thể có nhiều cài đặt lặp lại, như-

(Nền sẽ lặp lại theo cả chiều dọc và chiều ngang.)
(Nền sẽ lặp lại theo chiều ngang.)
(Nền sẽ lặp lại theo chiều dọc.)

Nền hình ảnh cố định

Bước 1. Hình nền cố định trông bắt mắt và không thay đổi khi bạn cuộn xuống

Để thực hiện chúng, bạn chỉ cần thực hiện một số chỉnh sửa đơn giản đối với đoạn mã trong phần trên. Thực hiện các chỉnh sửa để làm cho thẻ nội dung trông như thế này-