Hình nền cho blog

Nhiều bạn hỏi tôi chèn hình nền như thế nào? Cách dưới đây tôi hướng dẫn bạn chèn hình nền vào blog. Trước tiên bạn phải có hình nền sẳn. Nếu bạn là dân chuyên về đồ họa, có thể design cho mình một cái tùy thích. Thông thường bạn có thể chọn hình nền có kích thước nhỏ lặp lại hay một hình đầy đủ toàn màn hình. Theo thống kê, kích thước màn hình 1024x728 được dùng nhiều nhất. Bạn có thể download gói wallpaper 3D chứa nhều ảnh rất đẹp với kích thước này, sau đó đưa GooglePages hay các trang chia sẻ ảnh để lấy liên kết.


NỀN MÀU

Bạn có thể đổi màu nền cho blog bằng cách vào Template | Fonts and Color. Trong khung nhỏ phía bên trái, bạn chọn Page Background Color và chọn màu mình muốn.

Bạn có thể sửa lại màu nền trong đây nếu bạn biết mã màu.

background-color:#E31122;

HÌNH NỀN CHO HEADER (Xem chi tiết).

HÌNH NỀN CHO SIDEBAR

Để chèn hình nền cho sidebar bạn vào Template | Edit HTML, kéo thanh trượt xuống phía dưới tìm cho được đoạn mã và chèn bên như bên dưới:

#sidebar-wrapper {
 background-image: url(LIÊN KẾT ĐẾN HÌNH ẢNH);

Trong đó LIÊN KẾT ĐẾN HÌNH ẢNH phải là liên kết đến hình ảnh. Có dạng như: http://www.vidu.com/hinh.jpg

Click SAVE CHANGES để lưu lại. Nếu blog bạn có nhiều sidebar-wrapper, bạn cũng làm tương tự.

HÌNH NỀN CHO MAIN

Tương tự như vậy bạn có thể chèn hình nền cho main-wrapper phía dưới dòng.

#main-wrapper {

HÌNH NỀN CHO TOÀN BỘ TRANG

Tương tự nhưng bạn chèn phía dưới.

body {

HÌNH ẢNH LẶP

Theo mặc định, hình nền của bạn sẽ bị lặp lại tùy thuộc vào kích cở hình cũng như cách bố trí trang và ký tự có trên blog của bạn. Nếu hình ảnh bạn dùng có kích thước nhỏ, cần lặp lại để phủ đầy trang thì quả là tuyệt. Còn ảnh kích thước lớn, không muốn lặp lại thì sao? Bạn chỉ việc thêm đoạn mã này phía dưới dòng liên kết đến ảnh.

background-repeat: no-repeat;

VỊ TRÍ HÌNH NỀN

Nếu bạn cần điều chỉnh vị trí hình nền hãy sử dụng đoạn mã này bên dưới các đoạn mã trên.

background-position: Y X;

Hãy tưởng tượng hệ tọa độ OXY, trong đó:

Y: trục tung, canh dọc.
X: trục hoành, canh ngang.

Giá trị của nó là:

Y: top, center, bottom (đầu, giữa, cuối)
X: left, center, right (trái, giữa, phải)


Ví dụ:

Bạn muốn hình nền nằm phía dưới, góc trái: background-position: bottom left;
Bạn muốn hình nền canh giữa trên: background-position: center center;

CỐ ĐỊNH HÌNH NỀN

Để cố định hình nền bạn đặt dòng sau phía dưới đoạn mã liên kết đến ảnh.

background-attachment: fixed;

TẤT CẢ TRONG MỘT

body {
background-color: #E31122;
background-image: url(LIÊN KẾT ĐẾN HÌNH ẢNH);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Hãy xem blog của tôi như là kết quả hiển thị.

Posted in: Thiết kế blogspot