ทำซ้ำภาพพื้นหลัง CSS
CSS พื้นหลังซ้ำ
ตามค่าเริ่มต้นbackground-image
คุณสมบัติจะเล่นรูปภาพซ้ำทั้งในแนวนอนและแนวตั้ง
ภาพบางภาพควรทำซ้ำในแนวนอนหรือแนวตั้งเท่านั้น มิฉะนั้น ภาพจะดูแปลก ๆ ดังนี้:
ตัวอย่าง
body
{
background-image: url("gradient_bg.png");
}
หากภาพด้านบนซ้ำในแนวนอนเท่านั้น ( background-repeat: repeat-x;
) พื้นหลังจะดูดีขึ้น:
ตัวอย่าง
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
เคล็ดลับ:หากต้องการเล่นภาพซ้ำในแนวตั้ง ให้ตั้งค่าbackground-repeat: repeat-y;
CSS พื้นหลังซ้ำ: ไม่ทำซ้ำ
การแสดงภาพพื้นหลังเพียงครั้งเดียวยังถูกระบุโดยbackground-repeat
คุณสมบัติ:
ตัวอย่าง
แสดงภาพพื้นหลังเพียงครั้งเดียว:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
ในตัวอย่างด้านบน ภาพพื้นหลังจะวางไว้ที่เดียวกับข้อความ เราต้องการเปลี่ยนตำแหน่งของภาพเพื่อไม่ให้รบกวนข้อความมากเกินไป
CSS พื้นหลังตำแหน่ง
คุณสมบัติbackground-position
นี้ใช้เพื่อระบุตำแหน่งของภาพพื้นหลัง
ตัวอย่าง
วางภาพพื้นหลังที่มุมบนขวา:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}