Cách chèn ảnh nền đầy đủ trong HTML

Hướng dẫn này sẽ chỉ cho bạn một cách đơn giản để mã hóa hình nền toàn trang bằng CSS. Và bạn cũng sẽ tìm hiểu cách làm cho hình ảnh đó phản hồi với kích thước màn hình của người dùng của bạn

Làm cho hình nền trải dài hoàn toàn để bao phủ toàn bộ khung nhìn của trình duyệt là một nhiệm vụ phổ biến trong thiết kế web. May mắn thay, nhiệm vụ này có thể được giải quyết bằng một vài dòng CSS

Che khung nhìn bằng hình ảnh

Trước tiên, chúng tôi sẽ muốn đảm bảo rằng trang của chúng tôi thực sự bao phủ toàn bộ chế độ xem

html {
   min-height: 100%;
}

Bên trong

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Phép thuật của thuộc tính 'Kích thước nền'

Điều kỳ diệu xảy ra với tài sản

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

background-size: cover;

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Vì trình duyệt có thể kéo dài hình ảnh, bạn nên sử dụng hình nền có độ phân giải đủ cao. Nếu không, hình ảnh có thể xuất hiện pixel

Nếu bạn quan tâm đến việc tất cả hình ảnh xuất hiện ở chế độ nền, thì bạn sẽ muốn đảm bảo rằng hình ảnh có tỷ lệ khung hình tương đối gần so với kích thước màn hình

Cách tinh chỉnh vị trí hình ảnh và tránh ốp lát

Trình duyệt cũng có thể chọn hiển thị hình nền của bạn dưới dạng các ô tùy thuộc vào kích thước của nó. Để ngăn điều này xảy ra, hãy sử dụng

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

background-repeat: no-repeat;

Để giữ mọi thứ đẹp đẽ, chúng tôi sẽ luôn giữ hình ảnh của mình ở trung tâm

Điều này sẽ căn giữa hình ảnh theo cả chiều ngang và chiều dọc mọi lúc

Bây giờ chúng tôi đã tạo ra một hình ảnh đáp ứng đầy đủ sẽ luôn bao phủ toàn bộ nền

html {
   min-height: 100%;
   background-image: url(image.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

Cách sửa hình ảnh tại chỗ khi cuộn

Bây giờ, chỉ trong trường hợp bạn muốn thêm văn bản ở trên cùng của hình nền và văn bản đó tràn qua chế độ xem hiện tại, bạn có thể muốn đảm bảo hình ảnh của mình ở trong nền khi người dùng cuộn xuống để xem phần còn lại của văn bản

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Bạn có thể bao gồm tất cả các thuộc tính nền được mô tả ở trên bằng cách sử dụng ký hiệu ngắn

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Không bắt buộc. Cách thêm truy vấn phương tiện cho thiết bị di động

Để thêm một số lớp kem trên bánh, bạn có thể muốn thêm truy vấn phương tiện cho màn hình nhỏ hơn

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Bạn có thể sử dụng Photoshop hoặc một số phần mềm chỉnh sửa hình ảnh khác để thu nhỏ kích thước hình ảnh gốc của mình để cải thiện tốc độ tải trang trên kết nối internet di động

Vì vậy, bây giờ bạn đã biết điều kỳ diệu của việc tạo nền hình ảnh toàn trang, đáp ứng, đã đến lúc tạo một số trang web đẹp

Bạn muốn xem thêm các mẹo và kiến ​​thức về phát triển web?

• đến bản tin hàng tuần của tôi
• Ghé thăm blog của tôi tại  1000 Mile World
• Theo dõi tôi trên Twitter

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Joe Liang

Nhà phát triển web tự do

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tạo một div hoặc bất kỳ phần tử HTML cấp khối nào với tên lớp được gọi là. bg-container nơi chúng ta sẽ thêm hình nền vào

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Tạo toàn màn hình cho Div vùng chứa

Sau đó, đặt div toàn màn hình để hình nền vừa với toàn màn hình của cửa sổ trình duyệt

Ghi chú. Bạn có thể thay đổi kích thước của div vùng chứa nếu bạn không muốn hình ảnh lấp đầy toàn bộ màn hình vì hình nền sẽ chỉ hiển thị dựa trên kích thước của div vùng chứa

Có một số cách để tạo div toàn màn hình nhưng tôi sẽ sử dụng chiều cao. 100% thuộc tính CSS để đạt được nó lần này

Đây là một quy trình gồm hai bước

1. Thêm một vài thuộc tính CSS vào HTML và bộ chọn nội dung. Đặt lề thành 0 sẽ loại bỏ mọi khoảng trắng xung quanh cửa sổ trình duyệt và đặt chiều cao thành 100%

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

2. Thêm ba thuộc tính vào. bộ chọn vùng chứa bg

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Tôi đã đặt chiều rộng thành 100% một cách rõ ràng, nhưng chúng ta không cần phải làm như vậy vì div là phần tử cấp khối và chiều rộng mặc định của nó được kéo dài bằng chiều rộng gốc của nó, trong trường hợp này là phần thân

Sau đó, đặt chiều cao. 100% sẽ kéo dài chiều cao của. bg-container vào cạnh dưới của khung nhìn trình duyệt

Để làm cho chiều cao hoạt động, hãy đảm bảo bạn đã thêm chiều cao. 100% cho HTML và bộ chọn nội dung ở trên, nếu không, nó sẽ không hoạt động

Để thấy rằng. bg-container, thêm đường viền có chiều rộng 5px, kiểu liền và màu đỏ

Ở giai đoạn này, tôi gặp sự cố là các thanh cuộn xuất hiện ở bên phải và bên dưới làm ẩn viền đỏ

Hãy khắc phục điều đó

Để ẩn thanh cuộn, hãy thêm tràn. ẩn đối với bộ chọn HTML và nội dung CSS

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Như bạn có thể thấy từ hình bên dưới, thanh cuộn đã biến mất nhưng đường viền ở dưới cùng và bên phải vẫn bị ẩn

Điều này là do khi bạn cung cấp đường viền cho phần tử đã có chiều rộng 100%, đường viền sẽ được thêm vào vùng chứa ngoài chiều rộng 100% ở cả bên trái và bên phải. Đó là lý do tại sao đường viền bên phải và bên dưới kéo dài ra ngoài mép của chế độ xem trình duyệt

Nói cách khác, để đưa đường viền trở lại, bao gồm đường viền trong chiều rộng 100%, tất cả những gì tôi phải thêm là kích thước hộp. thuộc tính CSS hộp viền thành. bg-container

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Bằng cách này, tôi biết nếu tôi thêm một hình ảnh làm hình nền vào vùng chứa này thì nó sẽ hiển thị trên toàn màn hình

Được đề xuất
Thiết kế biểu mẫu đăng ký hấp dẫn bằng HTML & CSS

Thêm hình nền toàn màn hình

Hãy thêm hình nền vào. bg-container

Đối với điều đó, tất cả những gì tôi phải làm là thêm thuộc tính CSS hình nền vào. bg-container với đường dẫn URL hình ảnh, thường sẽ là vị trí hình ảnh của thư mục dự án của bạn hoặc bất kỳ URL hình ảnh web nào

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Giá trị của thuộc tính hình nền phải là từ URL theo sau là đường dẫn URL hình ảnh trong dấu ngoặc đơn hoặc dấu ngoặc kép bên trong dấu ngoặc đơn

Được đề xuất
Trung tâm CSS A Div theo chiều ngang và chiều dọc

Điều chỉnh kích thước hình nền

Đợi đã...chúng ta chưa xong đâu

Như bạn có thể thấy hình ảnh bị cắt vì kích thước hình ảnh lớn hơn chiều rộng của. bg-container. Tôi có thể sửa nó bằng thuộc tính kích thước nền. Nó có hai giá trị chính Cover và Contain

Bìa sẽ cố gắng khớp chiều cao của hình ảnh với chiều cao màn hình và kéo dài chiều rộng theo tỷ lệ

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Như bạn có thể thấy, chiều rộng của hình ảnh tôi chọn rộng hơn chiều cao, vì vậy khi bạn sử dụng chứa làm giá trị của kích thước nền, chiều rộng của hình ảnh được kéo dài để phù hợp với chiều rộng của trình duyệt nhưng chiều cao ngắn và bạn có thể thấy

Hãy khắc phục điều đó

Sử dụng lặp lại nền. thuộc tính CSS không lặp lại vào. bg-container để loại bỏ các hình ảnh lặp lại ở phía dưới

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Như tôi đã đề cập trước đây, hình ảnh tôi chọn rộng hơn cao hơn, vì vậy trong trường hợp này, rõ ràng là sử dụng kích thước nền. che để lấp đầy màn hình một cách độc đáo với hình ảnh

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Được đề xuất
Giải thích về bố cục nhiều cột đáp ứng CSS Flexbox cần biết

Hình nền trung tâm

Điều này tốt nhưng nếu tôi muốn hiển thị một phần cụ thể của hình ảnh thay vì mặc định thì sao?

Chà…chúng ta có thể làm điều này một cách dễ dàng bằng cách sử dụng thuộc tính vị trí nền

Giả sử tôi muốn căn giữa cây vào khung nhìn. Để làm điều đó, tất cả những gì tôi phải làm là thêm trung tâm center làm giá trị cho thuộc tính vị trí nền bên trong. bg-container

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Hoặc, nếu bạn muốn hiển thị phía trên bên trái của hình ảnh, bạn đoán xem…giá trị của vị trí nền sẽ ở trên cùng bên trái, v.v.

Làm cách nào để đặt nền trong HTML?

Làm cách nào tôi có thể đặt hình nền trên tất cả các trang trong HTML?

Làm cách nào để thêm hình nền trong HTML bằng CSS?