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

คุณสมบัติ background-size กำหนดขนาด ของภาพพื้นหลัง ค่าของคุณสมบัตินี้คือ หน่วย ใดๆ สำหรับขนาด หรือคำสำคัญ auto, cover หรือ contain

ไวยากรณ์

ตัวเลือก {
	background-size: ค่า;
}

คำสำคัญ

ค่า	คำอธิบาย
`auto`	พื้นหลังจะมีขนาดตามธรรมชาติ เช่นเดียวกับ ขนาดจริงของภาพพื้นหลัง หากระบุ `auto` สำหรับด้านเดียวเท่านั้น ด้านนั้นพื้นหลังจะถูกปรับขนาดเพื่อ รักษาสัดส่วนโดยไม่บิดเบี้ยว
`cover`	ปรับขนาดภาพเพื่อให้ครอบคลุมบล็อกทั้งหมด โดยคงสัดส่วนไว้ ภาพจะพยายามปรับให้พอดีทั้งหมด แต่บางครั้งอาจไม่สำเร็จ ดังนั้นบางส่วน ของภาพอาจถูกตัดออก บล็อกจะถูกปกคลุมด้วยภาพ ทั้งหมดเสมอ
`contain`	ปรับขนาดภาพเพื่อให้พอดีทั้งหมดภายในบล็อกโดย รักษาสัดส่วนไว้ ในกรณีนี้มันอาจจะใช้ความกว้างทั้งหมด หรือความสูงทั้งหมด (ขึ้นอยู่กับสัดส่วนของภาพและ ขนาดขององค์ประกอบ) โดยทั่วไปบล็อกจะไม่ถูกปกคลุมด้วยภาพ ทั้งหมด (แต่ภาพจะมองเห็นทั้งหมดเสมอ แม้ว่าจะเป็น เวอร์ชันย่อก็ตาม)

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

การใช้งาน

หน่วยสำหรับขนาดและ auto สามารถใช้ ในรูปแบบต่างๆ ได้ เช่น: auto 20px, หรือ 30% 20px, หรือ auto 30% เป็นต้น ในกรณีนี้ พารามิเตอร์แรกกำหนดขนาด ของพื้นหลังตามความกว้าง และพารามิเตอร์ที่สอง - ขนาด ของพื้นหลังตามความสูง หากระบุพารามิเตอร์เดียว - มัน จะกำหนดขนาดพื้นหลังทั้งความกว้าง และความสูงพร้อมกัน

ตัวอย่าง

ตอนนี้ภาพพื้นหลังจะมี ขนาดตามธรรมชาติ:

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

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

ตัวอย่าง

ตอนนี้ภาพพื้นหลังจะมีขนาด 300px คูณ 400px (ในกรณีของเรา สัดส่วน ของภาพจะบิดเบี้ยว):

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

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

ตัวอย่าง

ตอนนี้ภาพพื้นหลังจะมีขนาด 400px คูณ 400px (ในกรณีของเรา สัดส่วน ของภาพจะบิดเบี้ยว):

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

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

ตัวอย่าง

ตอนนี้ภาพพื้นหลังจะมีขนาด 400px ตามแนวนอน และตามแนวตั้งขนาดของมัน จะปรับเพื่อไม่ให้สัดส่วนบิดเบี้ยว:

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

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

ตัวอย่าง

ตอนนี้ภาพพื้นหลังจะมีขนาด 400px ตามแนวตั้ง และตามแนวนอนขนาดของมัน จะปรับเพื่อไม่ให้สัดส่วนบิดเบี้ยว:

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

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

ตัวอย่าง . ค่า contain

ดูการทำงานของค่า contain:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

ตัวอย่าง . ค่า cover

ดูการทำงานของค่า cover:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

ตัวอย่าง . ปรับปรุงการทำงานของ cover

การทำงานของค่า cover สามารถปรับปรุงได้ โดยการจัดกึ่งกลางภาพด้วยคุณสมบัติ background-position (ในกรณีของเรา ส่วนที่มองเห็นจะเริ่มเป็น หัวของม้า แทนที่จะเป็นก้นของพวกมัน):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

ดูเพิ่มเติม

คุณสมบัติ background,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับพื้นหลัง