Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Không lặp lại

Ở đây, chúng tôi đặt hình nền thành background-repeat:no-repeat. Điều này ngăn hình ảnh lặp lại trên phần tử [trong trường hợp hình ảnh nhỏ hơn phần tử]. Bạn cũng có thể sử dụng repeat-x và repeat-y để chỉ lặp lại nền theo chiều ngang hoặc chiều dọc. Để biết thêm thông tin, hãy xem thuộc tính CSS background-repeat

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Toàn bộ trang

Đoạn mã sau chỉ định hình nền cho toàn bộ trang [thông qua thẻ 'body']. Chúng tôi đặt hình ảnh ở giữa trang và ngăn hình ảnh lặp lại trên trang

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Tốt hơn nữa, bạn có thể sử dụng thuộc tính CSS background để đặt tất cả các thuộc tính nền cùng một lúc. Do đó, chúng ta có thể viết lại đoạn mã trên thành

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

Xem trước trình chỉnh sửa

Tôi đặt mã ở đâu?

Để áp dụng hình nền cho mọi trang trên trang web của bạn, hãy đặt mã vào biểu định kiểu bên ngoài

Nếu bạn muốn hình nền chỉ xuất hiện trên một trang, hãy bao quanh mã bằng các thẻ và đặt giữa các thẻ của tài liệu

1. Tải lên hình nền
2. Mở tệp HTML
3. Thêm phần đầu của tài liệu HTML bằng các thẻ ' và '. 4. Chèn các thẻ và giữa các thẻ "Head"
5. Thêm phần tử { body
6. Thêm hình nền. url[" "];
7. Thêm đường dẫn đầy đủ vào hình ảnh giữa các dấu ngoặc kép
8. Thêm } vào cuối phần nội dung CSS của bạn
9. Lưu các thay đổi của bạn

Bản tóm tắt này có giúp ích gì cho bạn không? Có Không

Cảm ơn tất cả các tác giả đã tạo ra một trang đã được đọc 2.210.126 lần

Khi viết mã trang web, việc sử dụng hình ảnh làm hình nền của trang web khác với việc chèn hình ảnh vào HTML bằng phần tử img

Để sử dụng một hình ảnh làm nền cho trang web của bạn, bạn sẽ sử dụng CSS

Đây là một ví dụ

    
    Background Image



    
Background image

h1{
    text-align: center;
}

Chúng tôi có hai khối mã ở trên — mã HTML hiển thị văn bản có nội dung "Hình nền" trên trang web trong khi mã CSS căn giữa văn bản trên trang

Để thêm hình nền vào trang web — hình bao phủ toàn bộ trang — bạn phải viết một số quy tắc CSS cho phần tử body. Đây là cách

body{
    background-image: url['bg-image.jpg'];
}

Trong đoạn mã trên, chúng tôi đang sử dụng thuộc tính background-image để thêm hình ảnh vào phần nội dung của trang web. Đường dẫn/vị trí của hình ảnh được chuyển vào dưới dạng tham số cho hàm url[].

h1{
    text-align: center;
}

0

Đây là giao diện của trang web bây giờ

Nếu Hình nền Nhỏ hơn Cửa sổ Trình duyệt thì sao?

Trong trường hợp hình ảnh nhỏ hơn trình duyệt, hình ảnh được lặp lại vài lần để che đi khoảng trống còn lại

Sự lặp lại này trông không đẹp cho mọi bức ảnh. Đây là phiên bản nhỏ hơn của hình ảnh được sử dụng trong phần trước trông như thế nào trong trình duyệt

Hình ảnh đã được chia thành bốn phần không đồng đều. Trừ khi đây là hiệu ứng mà bạn đang tìm kiếm, bạn có thể sửa nó bằng cách sử dụng thuộc tính

h1{
    text-align: center;
}

1

Đây là cách khắc phục sự cố lặp lại hình ảnh

body{
    background-image: url['bg-image-small.jpg'];
    background-repeat: no-repeat;
}

Trong đoạn mã trên, chúng tôi đã gán giá trị

h1{
    text-align: center;
}

2 cho thuộc tính

h1{
    text-align: center;
}

1

Đây là giao diện của trang web bây giờ

Hình ảnh không còn được lặp lại trên trang nhưng chúng tôi gặp sự cố mới — hình ảnh không còn bao phủ toàn bộ trang.  

Để khắc phục điều đó, chúng tôi sử dụng các thuộc tính

h1{
    text-align: center;
}

4 và

h1{
    text-align: center;
}

5

body{
    background-image: url['bg-image-small.jpg'];
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Đặt giá trị của thuộc tính

h1{
    text-align: center;
}

4 thành

h1{
    text-align: center;
}

7 làm cho hình ảnh bao phủ toàn bộ phần tử [trong trường hợp của chúng tôi là ____27_______/toàn bộ trang]

Với giá trị

h1{
    text-align: center;
}

9 của thuộc tính

h1{
    text-align: center;
}

5, vị trí của hình ảnh được cố định. Bằng cách này, nó vẫn ở cùng một vị trí ngay cả khi bạn cuộn qua trang

Đây là hình ảnh bây giờ

Nhược điểm của việc kéo dài một hình ảnh nhỏ để che toàn bộ trang là hình ảnh sẽ giảm chất lượng và trở nên mờ khi được kéo dài. Trong trường hợp này, bạn nên cân nhắc trước khi sử dụng một hình ảnh nhỏ làm hình nền cho trang web của mình

Tóm lược

Trong bài viết này, chúng tôi đã nói về việc thêm hình nền vào trang web

Bạn có thể thêm hình nền vào trang web của mình bằng thuộc tính CSS background-image

Chúng tôi cũng đã học cách sử dụng các thuộc tính nền CSS khác như

h1{
    text-align: center;
}

1,

h1{
    text-align: center;
}

4 và

h1{
    text-align: center;
}

5

Mã hóa vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Ihechikara Vincent Abba

Tiểu sử của tác giả này có thể được tìm thấy trong các bài viết của ông

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

Mã để chèn hình nền trong HTML là gì?

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