Cách chèn ảnh làm nền trong css
Thiết lập lặp lại ảnh nền -
background-repeatThiết lập màu nền cho phần tử dùng thuộc tính CSS background-color chỉ ra giá trị màu theo tên, hoặc theo mã hex, hoặc theo trộn rgb. Hãy xem phần màu sắc và thuộc tính
color để biết tên các màu.
Chú ý là ngoài màu nền cho phần tử với thuộc tính background-color thì còn có thể thiết lập nhiều lớp nền là ảnh nền cho phần tử bằng thuộc tính background-image. Màu nền được vẽ sau ảnh nền (nếu có).
Ví dụ về màu nền #41c04d Ví dụ về màu nền rgb(135,206,235) Ví dụ về màu nền coral Chú ý màu nền được tô trong phạm vi (tô phần content, tô cả phần padding, hay cả phần border) được thiết lập thông qua thuộc tính background-clip Ảnh nền với background-imageThuộc tính Cú pháp: background-image: image | none Trong đó:
Mặc định thuộc tính background-image lặp lại ảnh nền theo cả chiều đứng và ngang để tô kín kích thước phần tử. Ví dụ bạn có url ảnh là: https://sg.cdnki.com/how-to-insert-image-as-background-in-css---aHR0cHM6Ly9jZG4wLmljb25maW5kZXIuY29tL2RhdGEvaWNvbnMvZXhwZW5zZXMtdnMtaW5jb21lLzMwL19fYmVhdXR5X2hlYWx0aF9jb3NtZXRpY3NfaGVhcnQtMzIucG5n.webp Dùng ảnh đó làm nền cho một phần tử div như ví dụ:
Ví dụ về ảnh nền với background-image Phần tử được tô bởi background-color rồi đên background-image Ví dụ về ảnh nền với background-image Có thể thiết lập nhiều ảnh nền
chồng lên nhau bằng cách liệt kê nhiều .nen { background-image: url(url-image1), url(url-image2); } Lặp lại ảnh nền: background-repeatMặc định ảnh nền lặp lại theo cả chiều x và chiều y. Với thuộc tính thêm background-repeat bạn có thể điều khiển tính lặp lại này, bằng các giá trị Cú pháp: background-repeat: valuex valuey; Trong đó: valuex và valuey là kiểu lặp lại theo chiều x và y có thể nhận
Ví dụ: ảnh lặp lại cả chiều x và y thì viết: background-repeat: repeat repeat; Ví dụ trên có thể viết ngắn gọn một giá trị background-repeat: repeat; Tương tự, có một số trường hợp viết ngắn ngọn bạn chỉ cần viết một giá trị bao gồm:
Ví dụ về ảnh nền với background-image Phần tử được tô bởi background-color rồi đên background-image Ví dụ về ảnh nền với background-image background-attachmentThuộc tính Ví dụ sau khi cuộn trang, phần tử di chuyển nhưng ảnh nền không di chuyển theo
Ví dụ về ảnh nền với background-image Phần tử được tô bởi background-color rồi đên background-image Ví dụ về ảnh nền với background-image |