Đặ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, chúng ta phải tìm cách 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.

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.

Đặ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);
}

đối với đoạn mã trên thì ảnh sẻ chỉ nằm ở một góc, không full ra toàn trang, một số bạn  thường cho thêm thuộc tính repeat vào thì ảnh sẽ lặp lại theo chiều ngang chiều dọc. Thật là khó, lắm lúc cùng quá, lấy đại ảnh khác đưa vào, miễn sao cho full mới thôi.
Nhưng kiểu nào cũng vậy hầu như nó xấu xấu thế nào ấy, Dưới đây là các khắc phục, chỉ cần 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ẽ co dãn theo đúng tỉ lệ của màn hình không làm xấu trang web, giống như động thái cover ảnh của các thợ làm ảnh chuyên nghiệp vậy.

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;
}

Thay địa chỉ ảnh bằng Url của ảnh mà bạn muốn load vào trang.
ở đ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 llàm vậy đôi khi làm hình ảnh biến dạng.Chúc các bạn thành công.

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..