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ử

body{
    background-image: url('bg-image.jpg');
}

8

Để 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

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{
    background-image: url('bg-image.jpg');
}

9. Đâ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

h1{
    text-align: center;
}

0 để 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

h1{
    text-align: center;
}

1.

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 bạn đang tìm kiếm, bạn có thể sửa nó bằ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

h1{
    text-align: center;
}

0

Đặ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à ____29/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

h1{
    text-align: center;
}

0

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

Thêm ảnh nền trong HTML là một trong những công việc phổ biến nhất khi bạn làm Thiết Kế Web. Các gợi ý sau đây sẽ được đề cập trong bài viết này

Tiếp tục với bài viết này về Hình nền trong HTML

Hình Nền Trong HTML

Có nhiều cách khác nhau để hình ảnh có thể được thêm vào một trang web để làm cho nó trông bắt mắt và hấp dẫn. Một trong những cách như vậy là thêm hình nền. Trong blog này, chúng ta sẽ hiểu cách chúng ta có thể thêm hình nền vào trang web bằng HTML & CSS. Cách phổ biến và đơn giản nhất để thêm hình nền là sử dụng thuộc tính hình nền bên trong thẻ

Ví dụ

h1{
    text-align: center;
}

8

Thuộc tính nền mà chúng tôi đã chỉ định trong thẻ không được hỗ trợ trong HTML5. Sử dụng các thuộc tính CSS, chúng ta cũng có thể thêm hình nền vào trang web

Trước tiên chúng ta hãy hiểu cách chúng ta có thể thêm hình nền vào trang web bằng CSS. Sau đó, chúng ta sẽ xem xét các thuộc tính CSS khác nhau mà chúng ta có thể sử dụng để thay đổi giao diện của trang web

Thuộc tính hình nền CSS

Trong tất cả các ví dụ, chúng tôi sẽ xác định mã CSS bên trong

Nội dung tài liệu

Bạn cũng có thể tiếp tục và thêm hai hình nền cho phần tử

Ví dụ

h1{
    text-align: center;
}

9

ghi chú

• Hình nền theo mặc định được thêm vào góc bên trái và được lặp lại theo cả hai cách, tôi. e. theo chiều ngang và chiều dọc

• Lý do tại sao nên giữ màu nền là nếu hình ảnh không có sẵn, thì thuộc tính màu nền sẽ được sử dụng và màu tương tự sẽ được hiển thị

Bây giờ trước khi hiểu cách chúng ta có thể sử dụng các giá trị thuộc tính CSS khác nhau, hãy xem danh sách các giá trị thuộc tính CSS được liên kết với hình nền

• url. URL tới hình nền. Trong trường hợp có nhiều hình ảnh, cần cung cấp danh sách được phân tách bằng dấu phẩy
• độ dốc tuyến tính (). Đặt một gradient tuyến tính làm hình nền. Cần ít nhất 2 màu
• radial-gradient(). Đặt độ dốc xuyên tâm làm hình nền. Cần ít nhất 2 màu
• lặp lại tuyến tính-gradient (). Lặp lại một gradient tuyến tính
• lặp lại-radial-gradient(). Lặp lại một gradient xuyên tâm
• ban đầu. Đặt thuộc tính thành giá trị mặc định của nó
• thừa kế. Kế thừa thuộc tính này từ phần tử cha của nó

Tiếp tục với bài viết này về Hình nền trong HTML

Bây giờ, hãy thực hiện một số ví dụ để hiểu cách sử dụng các giá trị thuộc tính CSS

Bối cảnh Lặp lại

Ở đây chúng tôi đang cố gắng thêm một vài hình nền trong đó hình ảnh đầu tiên sẽ chỉ xuất hiện một lần và hình ảnh thứ hai sẽ được lặp lại. Chúng tôi đang sử dụng lặp lại nền để làm như vậy

body{
    background-image: url('bg-image.jpg');
}

0

Tiếp tục với bài viết này về Hình nền trong HTML

Sử dụng lớp

Trong ví dụ này, chúng tôi đang tạo bg-image với các thuộc tính nền khác nhau như hình ảnh, màu sắc, vị trí và lặp lại. Chúng tôi đang nhắm mục tiêu lớp bg-image để áp dụng các thuộc tính nền cho trang web

body{
    background-image: url('bg-image.jpg');
}

1

Tiếp tục với bài viết này về Hình nền trong HTML

Độ dốc tuyến tính

Ở đây chúng ta đang tạo một linear-gradient sử dụng hai màu (i. e. đỏ & vàng) và đặt nó làm hình nền

body{
    background-image: url('bg-image.jpg');
}

2

Tiếp tục với bài viết này về Hình nền trong HTML

Chuyển màu 3 màu

Ở đây chúng ta đang tạo một linear-gradient sử dụng ba màu (i. e. đỏ, xanh dương & xanh lục) và đặt nó làm hình nền

body{
    background-image: url('bg-image.jpg');
}

3

Tiếp tục với bài viết này về Hình nền trong HTML

Lặp lại Gradient tuyến tính

Trong ví dụ này, chúng tôi đang lặp lại gradient tuyến tính bằng cách sử dụng các hàm repeat-linear-gradient() và đặt nó làm hình nền

body{
    background-image: url('bg-image.jpg');
}

4

Tiếp tục với bài viết này về Hình nền trong HTML

Độ dốc xuyên tâm

Ở đây chúng ta đang tạo một radial-gradient sử dụng hai màu (i. e. đỏ & vàng) và đặt nó làm hình nền

body{
    background-image: url('bg-image.jpg');
}

3

Gradient xuyên tâm 3 màu

Ở đây chúng ta đang tạo một radial-gradient sử dụng ba màu (i. e. đỏ, xanh dương & xanh lục) và đặt nó làm hình nền

body{
    background-image: url('bg-image.jpg');
}

3

Tiếp tục với bài viết này về Hình nền trong HTML

Lặp lại Radial Gradient

Trong ví dụ này, chúng tôi đang lặp lại gradient xuyên tâm bằng cách sử dụng các hàm repeat-radial-gradient() và đặt nó làm hình nền

body{
    background-image: url('bg-image.jpg');
}

3

Bây giờ sau khi thực hiện đoạn mã trên, bạn sẽ hiểu cách chèn hình nền vào trang web bằng HTML & CSS. Tôi hy vọng blog này là thông tin và giá trị gia tăng cho bạn. Với điều này, chúng tôi đi đến phần cuối của bài viết này

Hãy xem Chương trình Thạc sĩ Nhà phát triển web Full Stack của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển web, jQuery, Angular, NodeJS, ExpressJS và MongoDB

Có một câu hỏi cho chúng tôi?

hình nền nghĩa là gì?

Đặt hình nền trong HTML là gì?

Hình nền được gọi là gì?

Mã nền cho HTML là gì?