[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 โดยชื่อสีนั้นไปดูได้ที่ ชื่อสีต่าง ๆ

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

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

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

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

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

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

background-image

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

[css]
background-image:url(‘รูปภาพที่จะใช้งาน’);
[/css]

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

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

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

[css]
background-image:url(‘out-facebook.png’);
[/css]

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

[css]
background-image:url(‘images/in-facebook.png’);
[/css]

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

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

[css]
background-image:url(‘../out-facebook.png’);
[/css]

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

[css]
background-image:url(‘../images/in-facebook.png’);
[/css]

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

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

Kwon Yuri

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

[css]
background-image:url(‘http://rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg’);
[/css]

เราก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

จะเห็นว่ากล่องขนาดกว้าง 600px สูง 500px ถูกปูพื้นหลังด้วยรูปของยูริ แต่ถ้าเราต้องการแค่รูปเดียวละ ไม่ได้ต้องการให้ปูเต็มแบบนี้ ไปดูหัวข้อต่อไปเลยครับ

background-repeat

การที่ตัวอย่างหัวข้อที่แล้ว มีรูปของยูริปูเต็ม div นั้นเพราะว่าค่าพื้นฐานของ background-repeat ก็คือ repeat แล้ว background-repeat มีค่าอะไรให้เราใช้งานบ้างละ

  • repeat : รูปจะถูกใช้ปูจนเต็ม
  • repeat-x : รูปจะถูกใช้ปูจนเต็มในแนวนอน
  • repeat-y : รูปจะถูกใช้ปูจนเต็มในแนวตั้ง
  • no-repeat : รูปจะถูกใช้ครั้งเดียว
  • inherit : สืบทอดค่ามา ทำความเข้าใจ inherit เพิ่มเติมได้ที่ inherit คืออะไร

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

[css]
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
[/css]

repeat

repeat-x

repeat-y

no-repeat

background-attachment

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

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

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

scroll

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

fixed

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

จะเห็นว่า ถ้าใช้ 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

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

[css]
background-position: right center;
background-position: 50% 50%;
background-position: 20px 40px;
[/css]

background-position: right center;

background-position: 50% 50%;

background-position: 20px 40px;

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

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย

ไม่รู้ว่าหลาย ๆ คนเป็นเหมือนผมหรือเปล่า แต่ผมเนี่ยโคตรขี้เกียจจะเขียน Code HTML ที่มันเกี่ยวกับ Form ยังไงก็ไม่รู้บอกไม่ถูก เวลาตัดเว็บแล้วเจอ Form เนี่ยจะตัดช้าลงไปอย่างไม่น่าเชื่อ แล้วผมก็ไปเจอเว็บนี้ FormBakery ลองไปดูว่า FormBakery มันทำอะไรเกี่ยวกับ Form ให้เรานะครับ

FormBakery

มาเริ่มต้นอบ Form จากเตากัน จะเห็นมีส่วนผสม 5 อย่างให้เราเลือก

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [1]

เราอยากได้ส่วนผสมไหน ก็ลากมาวางเลยครับ

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [2]

เราสามารถปรับเปลี่ยนข้อความต่าง ๆ รวมถึง options ให้กับส่วนผสมเราได้

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [3]

หลังจากที่ปรับแต่งจนเราพอใจแล้ว ก็กด Export เลยครับ

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [4]

เราจะได้ Code HTML CSS ออกมาให้ใช้งานแล้วครับ

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [5]

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [6]

แต่ถ้าเป็นส่วนของ javascript และ php นั้นเราต้องจ่ายเงินเพิ่ม เพื่อที่จะรับ Code ในส่วนนั้น

[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [7]

แต่สำหรับผม ผมต้องการแค่ HTML CSS ดังนั้น FormBakery ก็ช่วยในสิ่งที่ผมต้องการครบแล้ว

ถ้าอยากจะไปลองอบ Form ของตัวเองดู ก็ไปที่ : FormBakery เลยครับ

[HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน

HTML5 นั้นมี element หลายตัวที่เพิ่มเข้ามา เมื่อนับรวมกับของเดิมแล้ว จะมีอยู่ 109 elements แล้วคิดว่าคุณจำมันหมดหรือเปล่า มาลองทดสอบกันดีกว่าครับ

HTML5 Elements Quiz

เปิดหน้าเว็บมา เค้าก็จะอธิบายการใช้งาน

[HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน [1]
หน้าแรกของเว็บ ที่อธิบายวิธีการใช้งาน

เมื่อคลิ๊ก LET’S DO THIS แล้ว เวลาจะนับถอยหลัง 5 นาที เพื่อให้เรากรอก element ที่เรารู้จัก

[HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน [2]
นับถอยหลัง 5 นาที กับ 109 elements

เวลากรอก element ลงไป ถ้าถูกต้องก็จะมาอยู่ด้านล่างแบบนี้

[HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน [3]
element ที่กรอกสำเร็จแล้วจะอยู่ด้านล่าง

และเมื่อเวลาหมด มันจะบอกว่าเรากรอกไปทั้งหมดกี่ตัว แล้วตัวที่เราไม่ได้กรอกเหลืออะไรบ้าง

[HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน [4]
เวลาหมดแล้ว element ที่เราไม่รู้จักจะอยู่ด้านล่าง
ลองทดสอบได้ที่นี่เลยครับ : HTML5 Elements Quiz

[CSS] แนะนำ Slide ที่ควรดูเพื่อทำความเข้าใจกับ CSS

เวลาหัดทำ CSS เราคงอยากหาความรู้เพิ่มเติมให้มากที่สุด วันนี้ผมมี Slide มา 5 อัน ดูแล้วน่าจะเข้าใจ CSS มากขึ้นนะครับ (ถ้า Slide ไหนไม่ขึ้น ลอง Refresh หน้านี้ดูใหม่อีกทีนะครับ ^^)

Efficient, Maintainable CSS

CSS Inheritance

Line Height

CSS System

Object Oriented CSS

[CSS3] แนะนำเว็บที่มีตัวอย่างการเขียน CSS3 ให้นำไปใช้

คราวนี้มีเว็บมาแนะนำครับ เป็นเว็บที่มีตัวอย่างการเขียน CSS3 ไว้เรียบร้อยให้เราสามารถนำไปปรับใช้งานได้ เว็บนั้นก็คือ CSS3 Click Chart by Impressive Webs ลักษณะของเว็บก็เป็นแบบนี้ครับ

[CSS3] แนะนำเว็บที่มีตัวอย่างการเขียน CSS3 ให้นำไปใช้ [1]
ลักษณะหน้าเว็บ

ถ้าเราคลิ๊กที่ วงกลม ? แล้ว จะมีตัวอย่างการใช้งาน และอธิบายรายละเอียดต่าง ๆ อย่างเช่น ผมคลิ๊กที่ Rotation ก็จะปรากฎแบบนี้ครับ

[CSS3] แนะนำเว็บที่มีตัวอย่างการเขียน CSS3 ให้นำไปใช้ [2]
ตัวอย่างการใช้งาน และอธิบายรายละเอียดต่าง ๆ

ทุกคนลองใช้งานดูนะครับ ไม่รู้ว่าจะถูกใจแล้วนำไปปรับใช้งานได้ตามที่ต้องการได้หรือเปล่า ^^