Đặ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.
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.
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
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 trangbody {
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úc 17:26 13 tháng 7, 2014
làm sao để responsive comment facebook hả bạn
lúc 18:19 13 tháng 7, 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é :)
lúc 19:15 13 tháng 7, 2014
ok, còn đối với video từ youtube hay vimeo, vk.com thì sao bạn
lúc 19:40 13 tháng 7, 2014
Cái đó để bữa sau mình viết bài hướng dẫn nhé hehe :)
lúc 00:08 14 tháng 7, 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.
lúc 12:27 18 tháng 7, 2014
Bài hữu ích, thanks
lúc 12:29 18 tháng 7, 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?
lúc 12:57 18 tháng 7, 2014
Chính xác là vậy :D
lúc 19:46 16 tháng 5, 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.
lúc 19:53 16 tháng 5, 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.
lúc 20:01 16 tháng 5, 2015
Cảm ơn bạn :D
lúc 20:26 29 tháng 7, 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 đỡ!
lúc 21:37 29 tháng 7, 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.
lúc 11:57 30 tháng 7, 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.
lúc 12:55 30 tháng 7, 2016
Mấy cái background-size bạn thử thay cover bằng "100% auto" xem sao nhé.
lúc 14:25 30 tháng 7, 2016
Lâm trả lời rất nhanh, mình thật sự cảm ơn nhé!
lúc 14:59 17 tháng 8, 2016
ai giup em lam responsive voi