คุณสมบัติพื้นหลัง CSS ช่วยให้เราจัดรูปแบบพื้นหลังขององค์ประกอบต่างๆ คุณสมบัติพื้นหลัง CSS เป็นชวเลขสำหรับระบุพื้นหลังขององค์ประกอบ background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin และ background-attachment รวมกันประกอบเป็นคุณสมบัติพื้นหลัง CSS
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติพื้นหลัง CSS มีดังต่อไปนี้−
Selector { background: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติพื้นหลัง CSS -
<!DOCTYPE html> <html> <head> <style> #main { margin: auto; width: 300px; background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"); background-repeat: no-repeat; background-size: cover; } #im { height: 200px; width: 200px; background-image: url("https://www.tutorialspoint.com/images/css.png"); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div id="main"> <div id="im"></div> </div> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini- logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: 10% 10%, 40% 40%, 90% 10%; } </style> </head> <body> </body> </html>
ผลลัพธ์
ซึ่งจะได้ผลลัพธ์ดังต่อไปนี้