ใน CSS สามารถกำหนดภาพพื้นหลังขององค์ประกอบได้ด้วยคุณสมบัติ background-image โดยใช้รูปภาพเป็นค่าของคุณสมบัตินี้ ตัวอย่างการกำหนดภาพพื้นหลังด้วย background-image ดังนี้
selector {
background-image: url(“image.jpg”);
}
โดย selector คือเลือกตัวเลือกองค์ประกอบที่ต้องการให้มีภาพพื้นหลัง และ url(“image.jpg”) คือที่อยู่ของไฟล์ภาพที่ต้องการใช้เป็นพื้นหลัง ในตัวอย่างนี้เป็นไฟล์ชื่อ image.jpg ที่อยู่ในโฟลเดอร์เดียวกันกับไฟล์ CSS ที่ใช้กำหนดคุณสมบัติ background-image
.hero-image {
background-image: url(“photographer.jpg”); /* ลิงค์เอาภาพมาใส่ใน url ได้เลย */
background-color: #cccccc; /* กำหนดสี */
height: 500px; /* กำหนดให้มีค่าสูง ขนาด 500px */
background-position: center; /* จัดภาพให้อยู่ตรงกลาง */
background-repeat: no-repeat; /* ภาพเดียว ไม่ทำซ้ำภาพ (ภาพจะมีรูปเดียว ถ้าทำซ้ำจะมีหลายภาพ) */
background-size: cover; /* Resize แบคกราวน์รูปให้พอดีกับกล่อง */
}
ถ้าตรึงภาพไม่ให้เลื่อนให้อยู่กับที่ใช้ background-attachment: fixed; ส่วนถ้าให้ scroll ลงมาจะเปลี่ยนเป็นใช้ background-attachment: scroll;
<h2>background-image สามารถเขียนในบรรทัดเดียวได้เช่น </h2>
background-image: url(“photographer.jpg”) no-repeat fixed center; //หมายความว่า ให้รูปภาพแบคกราน์นี้ ไม่ทำซ้ำภาพ เป็นแบบ Fixed ไม่เลื่อนไปมา และอยู่ตรงกลาง
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana