THAY ĐỔI BACKGROUND BLOG VỚI CSS

Trong quá trình thiết kế, trang trí Blog, không một hay hai thì cuối cùng bạn cũng sẽ đụng đến Background (Hình nền) Blog mình. Vậy để thay đổi Background Blogthì làm như thế nào ? Bài viết sau sẽ giúp bạn tự tạo Background với CSS.

VẬY BACKGROUND LÀ GÌ VẬY ?




Background chính là hình nền của Website hay Blog. Nó có thể chia làm ba loại: Background dùng màu sắc, Background dùng hình ảnh và Background dùng cả hình ảnh lẫn màu sắc (nếu hình ảnh trong suốt). Ví như Vnblogspot của Bác Tiến dùngBackground màu xám và Background  eBlogViet của Bác Tỉnh dùng hình vải len. (Phần khoanh viền đỏ đức khúc là Background)

Background của Vnblogspot

Background của eBlogViet

CÁCH TẠO BACKGROUND CHO BLOGGER

Đầu tiên, bạn vào bảng điều khiển Blog của chính mình, chọn Mẫu > Chỉnh sửa HTML > Tiếp tục (không cần nhấn Mở rộng Mẫu tiện ích)

 

Tiếp theo, bạn nhấn Ctrl + F, tìm đoạn code ]]></b:skin> và thêm trước nó nhữngcấu trúc CSS dưới đây tùy theo từng trường hợp



NẾU BẠN MUỐN CHÈN BACKGROUND DÙNG MÀU SẮC

body {background: mã màu!important}

NẾU BẠN MUỐN CHÈN BACKGROUND DÙNG HÌNH ẢNH

body {background: url(link đến hình ảnh)!important}

NẾU BẠN MUỐN CHÈN BACKGROUND DÙNG HÌNH ẢNH LẪN MÀU SẮC

body {background: mã màu!important url(link đến hình ảnh trong suốt)!important}

Lưu ý, giữa mã màu, url() với chữ !important không được có khoảng cách

Cuối cùng nhấn Lưu mẫu

 

CÁC CÂU HỎI

1. MÃ MÀU TRÊN KIA LÀ GÌ ? 

Mã màu có thể nói nôm na là tên của màu sắc, bạn có thể kiếm các mã màu tại đây. Ví dụ nếu bạn chọn màu #150517 (Grey0) thì CSS sẽ có dạng:

body {background: #150517!important}

2. LINK ĐẾN HÌNH ẢNH LÀ GÌ ?

Chính là URL của ảnh cần làm Background. Hình ảnh để làm Background có hai loại:

1. Hình ảnh lớn: Tức ảnh toàn màn hình và có thể đứng đơn lẻ. Để tìm loại hình này bạn có thể lên Google với từ khóa background
2. Hình ảnh nhỏ: Tức ảnh có khả năng khi lặp lại (repeat) sẽ tạo thành họa tiết. Bạn có thể tìm những hình ảnh này tại Squidfingers Patterns

Nếu đã chọn hình ảnh ưng ý thì bạn hãy Copy URL ảnh đó và dán vào code CSS (khuyên bạn nên up ảnh lên Picasa để phòng khi ảnh bị die). Ví dụ nếu bạn chọn hình ảnh này. Thì code sẽ có dạng:

body {background: url(https://lh6.googleusercontent.com/-797NEWLpJ6Y/T1xKsXic8pI/AAAAAAAACmI/nxm303_amo8/s20/pattern_158.gif)!important}

Ngoài ra, nếu có kiến thức về CSS, bạn cũng có thể làm Background cho từng thành phần trong Blog hay áp dụng các thuộc tính CSS Gradient, Opacity, Transition,... để làm Background thêm sinh động hơn nhé :)

CHÚC CÁC BẠN THÀNH CÔNG !