Như tiêu đề, bài viết này mình lưu lại một vài thứ liên quan đến việc Đặt ảnh nền trong CSS hay anh em thường tìm từ khóa “quốc tế” là Background image CSS ^^
Đặt ảnh nền trong CSS – Background image CSS
Đầu tiên, nếu anh em nào đang dùng WordPress thì rất nhiều theme hỗ trợ việc đặt ảnh nền (backgroud image) rồi, và nó cũng có rất nhiều hiệu ứng và tùy chọn đi kèm. Tuy nhiên, trong trường hợp anh em muốn đặt ảnh nền cho một vùng chọn, ví dụ cho một khung widget, banner, header, footer,… gì đó thì làm như sau.
Đặt ảnh nền trong CSS – Background image CSS với cú pháp tiêu chuẩn
Cú pháp tiêu chuẩn là chỉ đơn thuần chèn cái ảnh nền vào thôi chứ không có tinh chỉnh gì hết anh em nhé, nếu cần tinh chỉnh gì thêm thì xem các tùy chọn tiếp theo.
body {
background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg);
background-color: #cccccc;
}
Đặt ảnh nền cố định khi cuộn trang trong CSS – Fixed Background image CSS
Với tùy chọn này, khi bạn cuộn trang, ảnh nền sẽ ghim lại một vị trí chứ không cuộn theo như mặc định. ưu điểm của cách này là làm cho ảnh nền đẹp, còn hạn chế là bạn phải sử dụng ảnh nền có kích thước đủ lớn nếu làm cho toàn bộ website. Và thường thì ảnh lớn sẽ nặng site.
body {
background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
Đặt ảnh nền trôi đi khi cuộn trang trong CSS – Scroll with the page Background image CSS
Với kiểu này thì khi bạn cuộn trang hình nền phía sau sẽ cuộn theo, thích hợp trong tường hợp vùng chọn có chiều cao lớn, khi cuộn trang có nhiều thay đổi.
body { background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg); background-repeat: no-repeat; background-attachment: scroll; }
Đặt ảnh nền co dãn khi phóng to thu nhỏ trang web
Khi bạn đặt ảnh nền theo chế độ mặc định, nếu độ rộng ảnh không đủ để lấp đầy màn hình khi bạn thu nhỏ trang web thì hãy dùng thuộc tính background-size. Và để ảnh nền phía sau co dãn khi bạn thu phóng trang web thì làm như sau:
background-size: cover;
