กำหนดขนาดภาพพื้นหลังด้วย CSS background-size

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

คุณสมบัติ background-size ควบคุมขนาดของภาพพื้นหลัง ช่วยให้ปรับภาพให้พอดีกับพื้นที่ได้อย่างยืดหยุ่น

ค่าที่ใช้ได้

รูปแบบ	ตัวอย่าง	คำอธิบาย
ความกว้าง ความสูง	`200px 100px`	กำหนดขนาดแน่นอน
ค่าเดียว	`200px`	ความกว้าง = ค่าที่กำหนด, ความสูง = auto
`cover`	`cover`	ครอบคลุมพื้นที่ทั้งหมด (อาจตัดขอบ)
`contain`	`contain`	แสดงภาพทั้งหมดในพื้นที่ (อาจมีพื้นที่ว่าง)
เปอร์เซ็นต์	`50% 50%`	เปอร์เซ็นต์ของพื้นที่วางพื้นหลัง

ตัวอย่าง: กำหนดขนาดแน่นอน

<html>
<head>
  <style>
    #demo {
      border: 5px dashed green;
      padding: 10px;
      background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
      background-size: 200px 100px;
    }
  </style>
</head>
<body>
  <div id="demo">
    <h1>www.tutorialspoint.com</h1>
    <p>ภาพพื้นหลังถูกบังคับให้กว้าง 200px สูง 100px...</p>
  </div>
</body>
</html>

ตัวอย่าง: Cover และ Contain

.cover-example  { background-size: cover; }
.contain-example { background-size: contain; }

Cover: ใช้สำหรับ Hero section, full-screen background
Contain: ใช้สำหรับ logo, pattern ที่ต้องแสดงเต็มภาพ

หลายภาพพื้นหลัง (Multiple Backgrounds)

background-image: url(img1.png), url(img2.png);
background-size: 100px 100px, cover;
background-position: top left, center;
background-repeat: no-repeat, no-repeat;