คุณสมบัติ background-image

คุณสมบัติ background-image กำหนดรูปภาพพื้นหลังให้กับ องค์ประกอบ โดยค่าเริ่มต้น รูปภาพ จะปูกระเบื้องตัวเองด้วยสำเนาของมันทั้งบล็อก อย่างไรก็ตาม, พฤติกรรมนี้สามารถยกเลิกได้ด้วยคุณสมบัติ background-repeat

ไวยากรณ์

cssตัวเลือก {
  background-image: url(เส้นทางไปยังรูปภาพ);
}

cssตัวเลือก {
  background-image: none;
}

ค่า

ค่าเริ่มต้น: none

ตัวอย่าง

มากำหนดรูปภาพพื้นหลังด้วย background-image โดยห้ามไม่ให้มันทำซ้ำด้วยคุณสมบัติ background-repeat:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

ตัวอย่าง

หากไม่มี background-repeat รูปภาพพื้นหลัง จะปูกระเบื้องทั้งบล็อก:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

ตัวอย่าง

สามารถกำหนดทั้งรูปภาพพื้นหลัง และกำหนดสีพื้นหลังได้พร้อมกันด้วย background-color ในกรณีนี้ บริเวณที่ไม่มีรูปภาพพื้นหลัง สีพื้นหลังจะปรากฏ:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

ดูเพิ่มเติม