มาทำความเข้าใจการใช้งานคำสั่ง background สำหรับ css กันนะครับ เพราะเชื่อว่านี่เป็น 1 ในคำสั่งที่ใช้บ่อยเป็นอันดับต้น ๆ และคนหัดทำ css น่าจะรู้จักมันไว้ Show
CSS : backgroundมาดูกันก่อนนะครับ ว่า background นั้น มันมีแบ่งย่อยอะไรบ้าง เพื่อเราจะได้รู้ว่า เราสามารถกำหนดอะไรให้คำสั่ง background ได้
คราวนี้ เรามาดูวิธีการใช้ในแต่ละคำสั่งกันนะครับ background-colorbackground-color นั้นใช้งานไม่ยากเลย มีวิธีการกำหนดสีหลัก ๆ อยู่ 3 แบบ ได้แก่
มาดูตัวอย่างกันนะครับ อย่างเช่นแบบนี้
พื้นหลังสีแดง พื้นหลังสีน้ำเงิน พื้นหลังสีเหลือง ทีนี้เวลาเราอยากให้ div หรือ element ไหนเรามีสีพื้นหลัง ก็ใช้ background-color ได้เลยครับ background-imageสำหรับคำนี้เป็นเหมือนคำสั่งที่เชื่อมไปยังคำสั่งอื่น ๆ ที่เหลือ ถ้าไม่ได้สั่ง background-image คำสั่งที่เหลือยกเว้น background-color ก็ไม่มีความจำเป็น แล้ว background-image มันใช้งานยังไงละ
ทีนี้ปัญหาของบางคนคือ แล้วเราจะใส่ในส่วน “รูปภาพที่จะใช้งาน” ยังไงเหรอ ลองดูตัวอย่างนี้นะครับ โดยเรามีรูป facebook อยู่สองรูป รูปที่อยู่ด้านนอกชื่อ out-facebook.png และรูปที่อยู่ใน folder images ชื่อ in-facebook.png ถ้าเราต้องการใช้งานรูป facebook ที่อยู่ด้านนอกให้สั่งใน css ว่า
แต่ถ้าจะใช้รูปใน folder images ละ ซึ่งใน folder images นั้นก็มีรูป facebook ซึ่งมีชื่อรูปว่า in-facebook.png ดังนั้นเราก็ต้องสั่งว่า
คราวนี้ผมย้ายตัว style.css เข้าไปไว้ใน folder css ละ ถ้าเราต้องการใช้งาน out-facebook.png ละต้องสั่งยังไง
การใส่ ../ คือ เหมือนออกมาจาก folder css ซึ่งเราก็จะมาเจอ out-facebook.png ดังนั้นถ้าต้องการใช้งาน in-facebook.png เราก็ต้องทำคล้าย ๆ คือ ออกจาก folder css ก่อน แล้วจึงเข้าไปยัง folder images ก็ต้องสั่งแบบนี้
แต่ถ้าเป็นในกรณีที่เราต้องการรูปจากเว็บอื่น หรือรูปที่เราทราบ url ก็ให้ใส่ส่งไปได้เลย อย่างเช่น ผมจะใช้รูปยูริด้านบนมาเป็นพื้นหลัง โดย url ของรูปคือ https://rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg ดังนั้นผมก็ต้องสั่งว่า
เราก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ จะเห็นว่ากล่องขนาดกว้าง 600px สูง 500px ถูกปูพื้นหลังด้วยรูปของยูริ แต่ถ้าเราต้องการแค่รูปเดียวละ ไม่ได้ต้องการให้ปูเต็มแบบนี้ ไปดูหัวข้อต่อไปเลยครับ background-repeatการที่ตัวอย่างหัวข้อที่แล้ว มีรูปของยูริปูเต็ม div นั้นเพราะว่าค่าพื้นฐานของ background-repeat ก็คือ repeat แล้ว background-repeat มีค่าอะไรให้เราใช้งานบ้างละ
เรามาดูตัวอย่างกันครับ ว่าแต่ละค่านั้นให้ผลลัพธ์ออกมาเป็นยังไง
repeatrepeat-xrepeat-yno-repeatbackground-attachmentสำหรับ background-attachment นั้นมีค่าให้ใช้งาน 3 ค่า คือ
มาดูตัวอย่างดีกว่าครับ น่าจะเข้าใจกันง่ายกว่า scrollfixedจะเห็นว่า ถ้าใช้ scroll เมื่อเราเลื่อน scroll bar ด้านข้างแล้ว ยูริจะหายไป T-T background-positionมาถึงคำสั่งสุดท้ายแล้วครับ กับ background-position เราสามารถใส่ค่าให้มันได้หลัก ๆ 3 แบบ
มาดูตัวอย่างกันนะครับ
background-position: right center;background-position: 50% 50%;background-position: 20px 40px;วิธีใช้ background เบื้องต้นน่าจะมีเท่านี้ ยังไงก็ลองศึกษาแล้วนำไปประยุกต์ใช้งานดูนะครับ ^^ คำสั่ง Background ใช้สำหรับทำหน้าที่อะไรback. 5.2 การกำหนด Background เป็นรูปภาพ คำสั่งที่ใช้กำหนดให้พื้นหลังเป็นรูปภาพ คือ <body background="folder/ชื่อไฟล์.
คำสั่งในการใส่สีพื้นหลัง ข้อใดคำสั่งที่ใช้กำหนดพื้นหลังเป็นสี คือ <body bgcolor ="ใส่ชื่อสีหรือ code สี"> ทดสอบการกำหนดพื้นหลังเป็นสี ข้อแนะนำสำหรับการกำหนดค่าสี (เช่นเดียวกับการกำหนดสีข้อความ)
สั่งในข้อใดเป็นคำสั่งสำหรับกำหนดภาพพื้นหลังคำสั่งสำหรับกำหนดสีพื้นหลังของเอกสาร : <BODY BGCOLOR = รหัสสี> … </BODY> การกำหนดสีพื้นหลังและการกำหนดสีของตัวอักษรนั้น จะทำการเขียนในส่วนของคำสั่ง <BODY>
Background เป็นการกำหนดอะไรการกำหนดพื้นหลัง (Background) การจัดรูปแบบหรือหน้าตาของเว็บเพจเพื่อให้ดึงดูดความสนใจแก่ผู้เข้าชมนั้น เป็นเรื่องสำคัญในการทำโฮมเพจ นอกจากการตกแต่งตัวอักษร ข้อความและการใส่รูปภาพสิ่งที่จะบ่งบอกถึงหน้าตาของเว็บเพจเรา คือ การกำหนดพื้นหลัง (Background) ให้กับเว็บเพจ ซึ่งการกำหนดพื้นหลัง สามารถกำหนดโดยใช้สี หรือรูปภาพก็ได้
|