มาทำความเข้าใจการใช้งานคำสั่ง background สำหรับ css กันนะครับ เพราะเชื่อว่านี่เป็น 1 ในคำสั่งที่ใช้บ่อยเป็นอันดับต้น ๆ และคนหัดทำ css น่าจะรู้จักมันไว้
CSS : background
มาดูกันก่อนนะครับ ว่า background นั้น มันมีแบ่งย่อยอะไรบ้าง เพื่อเราจะได้รู้ว่า เราสามารถกำหนดอะไรให้คำสั่ง background ได้
- background-color : สีของพื้นหลัง
- background-image : รูปที่นำมาใช้เป็นพื้นหลัง
- background-repeat : คำสั่งนี้จะคู่กับ background-image เพื่อจะสั่งให้พื้นหลังนำรูปมาใช้ซ้ำ
- background-attachment : คำสั่งนี้ก็ใช้คู่กับ background-image เหมือนกัน เพื่อจะกำหนดรูปว่าให้อยู่กับที่ หรือเคลื่อนตาม
- background-position : คำสั่งนี้ก็ใช้คู่กับ background-image เช่นเดียวกัน โดยเป็นการกำหนดตำแหน่งเริ่มต้นที่รูปนี้จะไปอยู่
คราวนี้ เรามาดูวิธีการใช้ในแต่ละคำสั่งกันนะครับ
background-color
background-color นั้นใช้งานไม่ยากเลย มีวิธีการกำหนดสีหลัก ๆ อยู่ 3 แบบ ได้แก่
- ใช้ค่า HEX เช่น #ff0000
- ใช้ค่า RGB เช่น rgb(255,0,0)
- ใช้ชื่อสี เช่น red โดยชื่อสีนั้นไปดูได้ที่ ชื่อสีต่าง ๆ
มาดูตัวอย่างกันนะครับ อย่างเช่นแบบนี้
1 | <p style="background-color:#FF0000;">พื้นหลังสีแดง</p> |
2 | <p style="background-color:rgb(0,0,255);">พื้นหลังสีน้ำเงิน</p> |
3 | <p style="background-color:yellow">พื้นหลังสีเหลือง</p> |
พื้นหลังสีแดง
พื้นหลังสีน้ำเงิน
พื้นหลังสีเหลือง
ทีนี้เวลาเราอยากให้ div หรือ element ไหนเรามีสีพื้นหลัง ก็ใช้ background-color ได้เลยครับ
background-image
สำหรับคำนี้เป็นเหมือนคำสั่งที่เชื่อมไปยังคำสั่งอื่น ๆ ที่เหลือ ถ้าไม่ได้สั่ง background-image คำสั่งที่เหลือยกเว้น background-color ก็ไม่มีความจำเป็น แล้ว background-image มันใช้งานยังไงละ
1 | background-image:url('รูปภาพที่จะใช้งาน'); |
ทีนี้ปัญหาของบางคนคือ แล้วเราจะใส่ในส่วน “รูปภาพที่จะใช้งาน” ยังไงเหรอ ลองดูตัวอย่างนี้นะครับ
![[CSS] วิธีใช้ background เบื้องต้น [1]](http://rabbitinblack.com/wp-content/uploads/2011/12/background-1.jpg "[CSS] วิธีใช้ background เบื้องต้น")
โดยเรามีรูป facebook อยู่สองรูป รูปที่อยู่ด้านนอกชื่อ out-facebook.png และรูปที่อยู่ใน folder images ชื่อ in-facebook.png ถ้าเราต้องการใช้งานรูป facebook ที่อยู่ด้านนอกให้สั่งใน css ว่า
1 | background-image:url('out-facebook.png'); |
แต่ถ้าจะใช้รูปใน folder images ละ ซึ่งใน folder images นั้นก็มีรูป facebook ซึ่งมีชื่อรูปว่า in-facebook.png ดังนั้นเราก็ต้องสั่งว่า
1 | background-image:url('images/in-facebook.png'); |
![[CSS] วิธีใช้ background เบื้องต้น](http://rabbitinblack.com/wp-content/uploads/2011/12/background-2.jpg "[CSS] วิธีใช้ background เบื้องต้น")
คราวนี้ผมย้ายตัว style.css เข้าไปไว้ใน folder css ละ ถ้าเราต้องการใช้งาน out-facebook.png ละต้องสั่งยังไง
1 | background-image:url('../out-facebook.png'); |
การใส่ ../ คือ เหมือนออกมาจาก folder css ซึ่งเราก็จะมาเจอ out-facebook.png ดังนั้นถ้าต้องการใช้งาน in-facebook.png เราก็ต้องทำคล้าย ๆ คือ ออกจาก folder css ก่อน แล้วจึงเข้าไปยัง folder images ก็ต้องสั่งแบบนี้
1 | background-image:url('../images/in-facebook.png'); |
ข้อสังเกตคือ ให้ยึดหลักว่าไฟล์ css ของเราอยู่ไหน แล้วเราก็จะทราบว่าต้อง url(‘XXXXX’) อย่างไร
แต่ถ้าเป็นในกรณีที่เราต้องการรูปจากเว็บอื่น หรือรูปที่เราทราบ url ก็ให้ใส่ส่งไปได้เลย อย่างเช่น
ผมจะใช้รูปยูริด้านบนมาเป็นพื้นหลัง โดย url ของรูปคือ http://rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg ดังนั้นผมก็ต้องสั่งว่า
1 | background-image:url('http://rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg'); |
เราก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ
จะเห็นว่ากล่องขนาดกว้าง 600px สูง 500px ถูกปูพื้นหลังด้วยรูปของยูริ แต่ถ้าเราต้องการแค่รูปเดียวละ ไม่ได้ต้องการให้ปูเต็มแบบนี้ ไปดูหัวข้อต่อไปเลยครับ
background-repeat
การที่ตัวอย่างหัวข้อที่แล้ว มีรูปของยูริปูเต็ม div นั้นเพราะว่าค่าพื้นฐานของ background-repeat ก็คือ repeat แล้ว background-repeat มีค่าอะไรให้เราใช้งานบ้างละ
- repeat : รูปจะถูกใช้ปูจนเต็ม
- repeat-x : รูปจะถูกใช้ปูจนเต็มในแนวนอน
- repeat-y : รูปจะถูกใช้ปูจนเต็มในแนวตั้ง
- no-repeat : รูปจะถูกใช้ครั้งเดียว
- inherit : สืบทอดค่ามา ทำความเข้าใจ inherit เพิ่มเติมได้ที่ inherit คืออะไร
เรามาดูตัวอย่างกันครับ ว่าแต่ละค่านั้นให้ผลลัพธ์ออกมาเป็นยังไง
1 | background-repeat : repeat; |
2 | background-repeat : repeat-x; |
3 | background-repeat : repeat-y; |
4 | background-repeat : no-repeat; |
repeat
repeat-x
repeat-y
no-repeat
background-attachment
สำหรับ background-attachment นั้นมีค่าให้ใช้งาน 3 ค่า คือ
- scroll: รูปจะเลื่อนไปตามการ scroll ซึ่งจะเป็นค่าพื้นฐานของคำสั่งนี้
- fixed : รูปจะไม่เลื่อนไปไหน จะอยู่กับที่
- inherit : สืบทอดค่ามา
มาดูตัวอย่างดีกว่าครับ น่าจะเข้าใจกันง่ายกว่า
scroll
![[CSS] วิธีใช้ background เบื้องต้น [3]](http://rabbitinblack.com/wp-content/uploads/2011/12/background-3.jpg "[CSS] วิธีใช้ background เบื้องต้น")
fixed
![[CSS] วิธีใช้ background เบื้องต้น [4]](http://rabbitinblack.com/wp-content/uploads/2011/12/background-4.jpg "[CSS] วิธีใช้ background เบื้องต้น")
จะเห็นว่า ถ้าใช้ scroll เมื่อเราเลื่อน scroll bar ด้านข้างแล้ว ยูริจะหายไป T-T
แต่ถ้าอยากให้ยูริยังอยู่กับเราที่เดิม ก็ให้ใช้ fixed แทนครับ \(^o^)/
แต่ถ้าอยากให้ยูริยังอยู่กับเราที่เดิม ก็ให้ใช้ fixed แทนครับ \(^o^)/
background-position
มาถึงคำสั่งสุดท้ายแล้วครับ กับ background-position เราสามารถใส่ค่าให้มันได้หลัก ๆ 3 แบบ
- ใส่ค่าซ้าย ขวา กลาง เช่น background-position:left top คือให้รูปที่เป็นพื้นหลังอยู่ซ้ายบน
- ใส่เป็น % เช่น background-position:10% 30% คือจะคำนวนให้รูปอยู่ในตำแหน่งห่างจากด้านซ้ายมา 10% และจากด้านบนมา 30%
- ใส่เป็นค่าตัวเลข เช่น background-position:5px 10px คือให้รูปเริ่มต้นที่ตำแหน่งนับจากซ้ายมา 5px และจากด้านบนมา 10px
มาดูตัวอย่างกันนะครับ
1 | background-position: right center; |
2 | background-position: 50% 50%; |
3 | background-position: 20px 40px; |
background-position: right center;
background-position: 50% 50%;
background-position: 20px 40px;
วิธีใช้ background เบื้องต้นน่าจะมีเท่านี้ ยังไงก็ลองศึกษาแล้วนำไปประยุกต์ใช้งานดูนะครับ ^^
