HTML Background Images

ใส่ภาพพื้นหลังด้วย HTML

สามารถเพิ่มภาพพื้นหลังใน HTML ได้โดยใช้ Attribute style ร่วมกับ CSS Property background-image

				
					<p style="background-image: url('images/pic_ocean.jpg');">

ใส่ภาพพื้นหลังด้วย style

สามารถระบุภาพพื้นหลังได้ในส่วน <style> โดยใช้ <head>

				
					p {
  background-image: url('images/pic_ocean.jpg');
}

ใส่ภาพพื้นหลังให้ทั้งหน้าเพจ

หากต้องการให้ทั้งหน้าเว็บมีภาพพื้นหลัง ให้ใส่ background-image ภายใน <body>

				
					body {
  background-image: url('images/pic_ocean.jpg');
}

Background Repeat

หากภาพพื้นหลังมีขนาดเล็กกว่าหน้าเว็บ เบราว์เซอร์จะทำการ ซ้ำภาพ (repeat) โดยอัตโนมัติจนเต็มพื้นที่

				
					body {
  background-image: url('images/pic_ocean_small.jpg');
}

หาก ไม่ต้องการให้ภาพพื้นหลังซ้ำ ให้เพิ่ม background-repeat เป็น no-repeat

				
					body {
  background-image: url('images/pic_ocean_small.jpg');
}

Background Cover

หากต้องการให้ภาพพื้นหลัง ครอบคลุมเต็มหน้าเว็บโดยไม่ยืดหรือซ้ำ ให้ตั้ง background-size: cover; และเพิ่ม background-attachment: fixed; เพื่อให้ภาพถูกตรึงกับตำแหน่ง

				
					body {
  background-image: url('images/pic_ocean.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}

Background Stretch

หากต้องการให้ภาพพื้นหลัง ขยายเต็มหน้าเพจแบบยืดเต็มพื้นที่
ให้ใช้ background-size: 100% 100%;

				
					body {
  background-image: url('images/pic_ocean.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}