imkopkap

#6 CSS: สร้างพื้นหลังด้วย CSS

ใช้เวลา 5 นาที 16/11/2014

หลายๆเว็บที่เคยเห็นกันมานะครับ บางเว็บเขาจะมีพื้นหลังเช่นเว็บของ แก๊ปก็มีพื้นหลังครับ kopkap.in.th  แน่นอนครับ ว่าสามารถใช้แท็ก img เพื่อสร้างพื้นหลังได้ แต่ว่ามันอาจจะทำให้ดูซับซ้อนเสียเกินไป สำหรับ CSS ในคลิปนี้แล้ว แก๊ปมีเทคนิคง่ายๆสำหรับการทำพื้นหลังมาฝากกันครับ โดยโค้ดสามารถดูได้จากข้างล่างนี้เลย

 

การกำหนดสีพื้นหลัง

body {
    background-color: #b0c4de;
}

 การกำหนดรูปภาพพื้นหลัง

body {
    background-image: url("paper.gif");
}

สำหรับการกำหนดพื้นหลังนั้น ทาง CSS ยังมี Properties อีกนะครับที่ไว้กำหนดตำแหน่ง กำหนดขนาด หรือกำหนดการทำซ้ำโดยจะใช้โค้ดดังนี้ครับ

  • background-repeat : เป็นการกำหนดภาพทำซ้ำ
background-repeat: no-repeat;
  •  background-position : เป็นการกำหนดขนาดตำแหน่งของภาพ ดู Properties Value เพิ่มเติมได้ ที่ ตรงนี้
background-position:left top;
  •  background-size: เป็นการกำหนดความกว้างใหญ่ของรูปภาพ
background-size: 100% 99%; // 100% คือกำหนดความยาว x ส่วน 99% คือกำหนดความสูง y

ง่ายๆครับสำหรับการกำหนดพื้นหลังให้กับเว็บไซต์ของเรา

 

บันทึกแนะนำ