คุณสมบัติ background-image
คุณสมบัติ background-image ใน CSS ใช้สำหรับระบุภาพพื้นหลังขององค์ประกอบ ใช้ได้กับทุก element ที่เป็นบล็อกหรือ inline-block
ตัวอย่างการใช้งาน
โค้ดด้านล่างสาธิตการตั้งค่าภาพพื้นหลังพร้อมขอบและระยะห่างภายใน:
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 10px;
background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>Tutorials Point เริ่มต้นจากความคิดที่ว่ามีกลุ่มผู้อ่านที่ตอบสนองดีกว่ากับเนื้อหาออนไลน์ และชอบเรียนรู้ทักษะใหม่ด้วยตนเองจากความสะดวกสบายของห้องนั่งเล่น...</p>
</div>
</body>
</html>คำแนะนำเพิ่มเติม
- ใช้
background-repeat: no-repeat;เพื่อป้องกันการทำซ้ำของภาพ - ใช้
background-position: center;เพื่อจัดตำแหน่งภาพให้อยู่กึ่งกลาง - ใช้
background-size: cover;เพื่อให้ภาพครอบคลุมพื้นที่ทั้งหมด - รองรับรูปแบบไฟล์: JPG, PNG, GIF, SVG, WebP
การใช้ Gradient เป็นพื้นหลัง
นอกจากภาพภายนอกแล้ว ยังสามารถใช้ CSS Gradient ได้:
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);