Làm Background Full Màn Hình Html

      115
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.

Bạn đang xem: Làm background full màn hình html


*

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 đâybody { 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.

Xem thêm: Facebook Ads: The Complete, Always, Facebook Ads: Online Advertising On Facebook

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.
Nhãn:CSS
*

*
Tác giả bài viết: Lâm Kiều

Mọi nhận xét trên blog ruby-forum.org.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.


Nhận thư mới

Hãy đăng ký theo dõi blog tại đây, bạn sẽ nhận được những thông tin mới nhất vào hòm thư của mình!