Hướng dẫn này sẽ chỉ cho bạn một cách đơn giản để viết mã hình nền toàn trang bằng cách sử dụng CSS. Và bạn cũng sẽ học cách làm cho hình ảnh đó đáp ứng với kích thước màn hình của người dùng. Làm cho hình nền được kéo 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

Bạn đang xem: css background toàn bộ trang

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

Tạo 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, công việc này có thể được thực hiện với một vài dòng CSS.

Cover Viewport with Image

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ộ khung nhìn:

  html {
   chiều cao tối thiểu: 100%;
}  

Bên trong html , chúng tôi sẽ sử dụng thuộc tính background-image để đặt hình ảnh:

  background-image: url (image.jpg); / * thay thế image.jpg bằng đường dẫn đến hình ảnh của bạn * /  

Phép thuật của thuộc tính ‘Background-Size’

Điều kỳ diệu xảy ra với thuộc tính background-size :

  background-size: cover;  

cover yêu cầu trình duyệt đảm bảo rằng hình ảnh luôn bao phủ toàn bộ vùng chứa, trong trường hợp này là html . Trình duyệt sẽ che vùng chứa ngay cả khi nó phải kéo dài hình ảnh hoặc cắt bớt một chút các cạnh.

Xem Thêm  Cách tạo Chú giải công cụ tốt hơn với JavaScript và CSS thuần túy - Chú giải công cụ javascript với nội dung html

Vì trình duyệt có thể làm giãn 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ể bị tạo pixel.

Nếu bạn quan tâm đến việc tất cả hình ảnh đều xuất hiện trong 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. < / p>

Cách Tinh chỉnh Vị trí Hình ảnh và Tránh Xếp gạch

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 ô xếp 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 no-repeat :

  background-repeat: no-repeat;  

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

  background-position: center center;  

Thao tác này sẽ luôn căn giữa hình ảnh theo cả chiều ngang và chiều dọc.

Hiện tại, 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 {
   chiều cao tối thiểu: 100%;
   background-image: url (image.jpg);
   background-size: bìa;
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
}
 

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 lên trên hình nền và văn bản đó tràn 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 text:

  background-attachment: fixed;  

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: url (image.jpg) trung tâm bìa cố định không lặp lại;  

Tùy chọn: Cách Thêm Truy vấn Phương tiện cho Di động

Để thêm chút đóng băng trên bánh, bạn có thể muốn thêm truy vấn phương tiện cho các màn hình nhỏ hơn:

  @ media only screen and (max-width: 767px) {
  html {
     background-image: url (small-image.jpg);
  }
}
 

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 để giảm kích thước hình ảnh gốc của mình nhằm cải thiện tốc độ tải trang trên kết nối internet di động.

Xem Thêm  Google Analytics là gì? Cách dùng Google Analytics hiệu quả - xin source code ứng dụng android

Giờ thì bạn đã biết điều kỳ diệu của việc tạo hình ảnh trang đầy đủ, đáp ứng nền, đã đến lúc tạo một số trang web đẹp!

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

  • Đăng ký nhậ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


Xem thêm những thông tin liên quan đến chủ đề toàn bộ nền css

CSS Background-image

  • Tác giả: F8 Official
  • Ngày đăng: 2020-01-30
  • Đánh giá: 4 ⭐ ( 6468 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy học tại http://fullstack.edu.vn để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.

    hoclaptrinh mienphi frontend backend devops
    ———————————————————–
    SƠN ĐẶNG
    ► Facebook: https://fb.com/sondnmc
    ► Email: sondnf8@gmail.com
    —————————————
    ► Học lập trình: http://fullstack.edu.vn
    ► Viết CV xin việc: http://mycv.vn
    —————————————
    HỌC LẬP TRÌNH MIỄN PHÍ
    ► Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    ► Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css

Hướng dẫn màu nền và ảnh nền (background)

  • Tác giả: thachpham.com
  • Đánh giá: 5 ⭐ ( 4014 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn sử dụng các thuộc tính background trong CSS để thêm màu nền và ảnh nền,thiết lập vị trí với background-position,tùy chỉnh lặp với background-repeat

Nền trong CSS

  • Tác giả: hktsoft.com
  • Đánh giá: 3 ⭐ ( 3278 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Nền CSS

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 8369 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Nền trong CSS

  • Tác giả: nq.com.vn
  • Đánh giá: 4 ⭐ ( 6396 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thiết lập hình nền trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 4400 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền …

Hình nền CSS

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 4 ⭐ ( 7784 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Java If và Java If Else If Câu lệnh với các ví dụ - cách sử dụng if else if trong java

By ads_php