[CSS] วิธีใช้ background เบื้องต้น

มาทำความเข้าใจการใช้งานคำสั่ง 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 โดยชื่อสีนั้นไปดูได้ที่ ชื่อสีต่าง ๆ

มาดูตัวอย่างกันนะครับ อย่างเช่นแบบนี้

<p style="background-color:#FF0000;">พื้นหลังสีแดง</p>
<p style="background-color:rgb(0,0,255);">พื้นหลังสีน้ำเงิน</p>
<p style="background-color:yellow">พื้นหลังสีเหลือง</p>

พื้นหลังสีแดง

พื้นหลังสีน้ำเงิน

พื้นหลังสีเหลือง

ทีนี้เวลาเราอยากให้ div หรือ element ไหนเรามีสีพื้นหลัง ก็ใช้ background-color ได้เลยครับ

background-image

สำหรับคำนี้เป็นเหมือนคำสั่งที่เชื่อมไปยังคำสั่งอื่น ๆ ที่เหลือ ถ้าไม่ได้สั่ง background-image คำสั่งที่เหลือยกเว้น background-color ก็ไม่มีความจำเป็น แล้ว background-image มันใช้งานยังไงละ

background-image:url('รูปภาพที่จะใช้งาน');

ทีนี้ปัญหาของบางคนคือ แล้วเราจะใส่ในส่วน “รูปภาพที่จะใช้งาน” ยังไงเหรอ ลองดูตัวอย่างนี้นะครับ

โดยเรามีรูป facebook อยู่สองรูป รูปที่อยู่ด้านนอกชื่อ out-facebook.png และรูปที่อยู่ใน folder images ชื่อ in-facebook.png ถ้าเราต้องการใช้งานรูป facebook ที่อยู่ด้านนอกให้สั่งใน css ว่า

background-image:url('out-facebook.png');

แต่ถ้าจะใช้รูปใน folder images ละ ซึ่งใน folder images นั้นก็มีรูป facebook ซึ่งมีชื่อรูปว่า in-facebook.png ดังนั้นเราก็ต้องสั่งว่า

background-image:url('images/in-facebook.png');

คราวนี้ผมย้ายตัว style.css เข้าไปไว้ใน folder css ละ ถ้าเราต้องการใช้งาน out-facebook.png ละต้องสั่งยังไง

background-image:url('../out-facebook.png');

การใส่ ../ คือ เหมือนออกมาจาก folder css ซึ่งเราก็จะมาเจอ out-facebook.png ดังนั้นถ้าต้องการใช้งาน in-facebook.png เราก็ต้องทำคล้าย ๆ คือ ออกจาก folder css ก่อน แล้วจึงเข้าไปยัง folder images ก็ต้องสั่งแบบนี้

background-image:url('../images/in-facebook.png');

ข้อสังเกตคือ ให้ยึดหลักว่าไฟล์ css ของเราอยู่ไหน แล้วเราก็จะทราบว่าต้อง url(‘XXXXX’) อย่างไร

แต่ถ้าเป็นในกรณีที่เราต้องการรูปจากเว็บอื่น หรือรูปที่เราทราบ url ก็ให้ใส่ส่งไปได้เลย อย่างเช่น

ผมจะใช้รูปยูริด้านบนมาเป็นพื้นหลัง โดย url ของรูปคือ https://rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg ดังนั้นผมก็ต้องสั่งว่า

background-image:url('https://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 คืออะไร

เรามาดูตัวอย่างกันครับ ว่าแต่ละค่านั้นให้ผลลัพธ์ออกมาเป็นยังไง

background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;

repeat

repeat-x

repeat-y

no-repeat

background-attachment

สำหรับ background-attachment นั้นมีค่าให้ใช้งาน 3 ค่า คือ

• scroll: รูปจะเลื่อนไปตามการ scroll ซึ่งจะเป็นค่าพื้นฐานของคำสั่งนี้
• fixed : รูปจะไม่เลื่อนไปไหน จะอยู่กับที่
• inherit : สืบทอดค่ามา

มาดูตัวอย่างดีกว่าครับ น่าจะเข้าใจกันง่ายกว่า

scroll

fixed

จะเห็นว่า ถ้าใช้ scroll เมื่อเราเลื่อน scroll bar ด้านข้างแล้ว ยูริจะหายไป T-T
แต่ถ้าอยากให้ยูริยังอยู่กับเราที่เดิม ก็ให้ใช้ fixed แทนครับ \(^o^)/

background-position

มาถึงคำสั่งสุดท้ายแล้วครับ กับ background-position เราสามารถใส่ค่าให้มันได้หลัก ๆ 3 แบบ

• ใส่ค่าซ้าย ขวา กลาง เช่น background-position:left top คือให้รูปที่เป็นพื้นหลังอยู่ซ้ายบน
• ใส่เป็น % เช่น background-position:10% 30% คือจะคำนวนให้รูปอยู่ในตำแหน่งห่างจากด้านซ้ายมา 10% และจากด้านบนมา 30%
• ใส่เป็นค่าตัวเลข เช่น background-position:5px 10px คือให้รูปเริ่มต้นที่ตำแหน่งนับจากซ้ายมา 5px และจากด้านบนมา 10px

มาดูตัวอย่างกันนะครับ

background-position: right center;
background-position: 50% 50%;
background-position: 20px 40px;

background-position: right center;

background-position: 50% 50%;

background-position: 20px 40px;

วิธีใช้ background เบื้องต้นน่าจะมีเท่านี้ ยังไงก็ลองศึกษาแล้วนำไปประยุกต์ใช้งานดูนะครับ ^^