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

[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('รูปภาพที่จะใช้งาน');

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

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

โดยเรามีรูป 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');
[CSS] วิธีใช้ background เบื้องต้น

คราวนี้ผมย้ายตัว 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 ก็ให้ใส่ส่งไปได้เลย อย่างเช่น

Kwon Yuri

ผมจะใช้รูปยูริด้านบนมาเป็นพื้นหลัง โดย 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

[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

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

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 เบื้องต้นน่าจะมีเท่านี้ ยังไงก็ลองศึกษาแล้วนำไปประยุกต์ใช้งานดูนะครับ ^^


Posted

in

by

Tags:

Comments

10 responses to “[CSS] วิธีใช้ background เบื้องต้น”

    1.  Avatar
      Anonymous

      ขอบคุณครับ ^^

  1. Panupan Fairee Avatar

    เนื้อหาเยี่ยม แต่ภาพประกอบเยี่ยมกว่า อิอิ

    1.  Avatar
      Anonymous

      ขอบคุณที่ชอบภาพประกอบครับ 555

  2.  Avatar
    Anonymous

    ต้องการทำ background ใน div footer ให้เต็มขนาดหน้าจอในแนวนอน แต่ div footer มันอยู่ใน wrapper ทำยังไงมันก็ไม่ออกไปด้านข้างของทั้ง 2 ฝั่ง ไม่ทราบว่าต้องทำยังไงครับ งงๆ ทำไม่ถูก อยากได้แบบด้านล่างของ faceblog.in.th

    1.  Avatar
      Anonymous

      ลองอ่านอันนี้ก่อนมั้ยครับ https://rabbitinblack.com/2011/11/css-how-to-use-firebug/

      1.  Avatar
        Anonymous

        พอรู้แล้วครับ ทำไง แต่ดูท่าต้องใช้เวลานาน เดี๋ยวให้ว่างก่อน ฮ่าๆ ขอบคุณครับพี่ ที่ช่วยตอบทุกคำถามที่ถามไป คงเหนื่อยแย่เลย ไม่เป็นไรครับ สู้ๆ ทาเคชิ

  3. Konoyaro2 Avatar
    Konoyaro2

    ขอบคุณคับ

  4. P15msu Avatar
    P15msu

    อธิบายได้สุดยอดเลย

  5. ddd Avatar
    ddd

    สุดยอดครับ

Leave a Reply

Your email address will not be published. Required fields are marked *