Đặt ảnh Background full màn hình

Hiện nay thì trong việc trang trí và tô điểm cho blog của mình, thì chúng ta phải tìm chăm chút khá nhiều thứ. Hiện tại thì đối với Blogger, trong phần Mẫu > Tùy chỉnh, tùy template sẽ có những tùy chỉnh khác nhau. Có cái thì cho thay đổi font chữ, kích thước, màu sắc rồi, cả hình nền của blog nữa, nhưng có cái tùy không cho bất kì tùy chọn nào.

Đặt ảnh Background full màn hình

Do dó bắt buộc chính chúng ta phải căn thiệp vào phần code có trên template đó. Và một trong những thứ đó là chọn một ảnh nền cho blog của mình. Đối với những bạn không rành về code thì đôi khi gặp một vài khó khăn nhỏ trong việc làm điều này. Nên mình lập là bài viết nhỏ này sẽ hướng dẫn cho những bạn đang tìm hiểu cách thức để đặt một hình nền tùy chọn cho website của bạn.

Đặt ảnh Background full màn hình

Đối với một số bạn đã biết về css thì sẽ biết, khá đơn giản để đặt hình nền cho một đối tượng bất kì, chỉ cần sử dụng thuộc tính background cho thẻ đó là được. Ví dụ đặt ảnh cho toàn trang
body {
  background: url(địa chỉ ảnh);
}
nhưng như đoạn mã trên thì ảnh sẻ chỉ nằm ở một góc mà chứ không tràn ra toàn trang web, một số bạn thì thường cho thêm thuộc tính repeat vào nữa thì ảnh sẽ lặp lại the chiều ngăng chiều dọc gì đó, một số bạn lại kiếm một ảnh cỡ đại bự để chèn vào.

Nhưng kiểu nào cũng vậy mình thấy hầu hết nó cũng thấy nó xấu xấu thế nào ấy, ngoại trừ những ảnh chỉ toàn màu hoặc nó đều nhau. Dưới đây là các khắc phục của mình, mình sẽ sử dụng thêm một vài dòng CSS3 giúp cho ảnh tự động tràn toàn màn hình, đặc biệt nó sẽ do dãn theo đúng tỉ lệ của màn hình không làm xấu trang web.

Thay vì sử dụng đoạn mã trên thì bạn hãy sử dụng đoạn mã sau đây
body {
  background: url(địa chỉ ảnh) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
ở đoạn mã trên bạn sẽ thấy background-size:cover, đây là giúp cho chiều rộng của hình ảnh bằng với chiều rộng của trình duyệt đang mở, trong trường hợp bạn muốn cả chiều cao ảnh co giãn theo chiều dọc luôn thì các bạn thay "cover: bằng 100% 100%" là được, nhưng mà làm vậy thì đôi khi nó làm hình ảnh biến dạng trông kì cục lắm.

Lời kết

Mong rằng qua bài viết này thì những bạn đang tìm hiểu về cách đặt background full màn hình qua việc sử dụng css đã có lời giải đáp riêng cho mình.

17 bình luận

  1. avatar says

    17:26 Ngày 13 tháng 07 năm 2014

    làm sao để responsive comment facebook hả bạn

  2. avatar says

    18:19 Ngày 13 tháng 07 năm 2014

    kiếm cái đoạn mã đặt facebook của bạn ấy, có cái như thế này data-width='500' thay bằng 100% là ok, lúc người ta xem bằng đt hay màn hình nhỏ thì nó tự thay đổi đúng.

    P/S: Bạn test bằng trình duyệt không được đâu nhé :)

  3. avatar says

    19:15 Ngày 13 tháng 07 năm 2014

    ok, còn đối với video từ youtube hay vimeo, vk.com thì sao bạn

  4. avatar says

    19:40 Ngày 13 tháng 07 năm 2014

    Cái đó để bữa sau mình viết bài hướng dẫn nhé hehe :)

  5. avatar says

    00:08 Ngày 14 tháng 07 năm 2014

    Tuyệt vời. Chị làm được rồi. Giờ vô sửa lại cho các bạn và cô chú khác đây. Cảm ơn em nha. Quá siêu luôn.

  6. avatar says

    12:27 Ngày 18 tháng 07 năm 2014

    Bài hữu ích, thanks

  7. avatar says

    12:29 Ngày 18 tháng 07 năm 2014

    P/S: Trường hợp trên là ảnh nhỏ hơn độ phân giải màn hình, nhưng nếu ngược lại ảnh lớn hơn thì nó sẽ thu nhỏ lại theo màn hình à ad?

  8. avatar says

    12:57 Ngày 18 tháng 07 năm 2014

    Chính xác là vậy :D

  9. avatar says

    19:46 Ngày 16 tháng 05 năm 2015

    Cho mình hỏi kích thước chuẩn của background là bao nhiêu vậy? mình nghe nói là 1800x1600 nhưng có người lại nói khác. giờ ko biết chọn bao nhiêu cho đúng.

  10. avatar says

    19:53 Ngày 16 tháng 05 năm 2015

    Tốt nhất là dựa vào Google analytics trên website của bạn màn hình nào là phổ biến nhất, độ phân giải nào cao nhất :D Hiện tại đủ loại màn hình nếu nói về một kích thước chuẩn thì khó mà nói được lắm. Kích thước bạn đề cập ở trên thì màn hình Full HD vẫn nhìn ok được.

  11. avatar says

    20:26 Ngày 29 tháng 07 năm 2016

    Lâm cho mình hỏi: Nếu mình áp dụng cho header thì phải viết thế nào? Cụ thể mình muốn dùng một ảnh làm nền cho header và tự động giãn ảnh theo chiều ngang vừa với màn hình. Mong giúp đỡ!

  12. avatar says

    21:37 Ngày 29 tháng 07 năm 2016

    Sử dụng nó tương tự thôi mà, bác kiểm tra coi headercủa bạn có tên class hay id là gì, thay body trong đoạn css trên thành class hoặc id là được.

  13. avatar says

    11:57 Ngày 30 tháng 07 năm 2016

    Nó là một class có tên headerpic-wrapper. Nhờ bạn giúp vì mình đã thử nhưng hình bị kéo giãn cả hai chiều, mà mình chỉ cần tự giãn theo chiều ngang.

  14. avatar says

    12:55 Ngày 30 tháng 07 năm 2016

    Mấy cái background-size bạn thử thay cover bằng "100% auto" xem sao nhé.

  15. avatar says

    14:25 Ngày 30 tháng 07 năm 2016

    Lâm trả lời rất nhanh, mình thật sự cảm ơn nhé!

  16. avatar says

    14:59 Ngày 17 tháng 08 năm 2016

    ai giup em lam responsive voi

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.