ทิปการใช้คำสั่ง CSS Background

CSS Tag

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

การจะพัฒนาเว็บให้เก่ง เราจำเป็นจะต้องอาศัยการทดสอบและดูผลลัพธ์ทีได้ว่า ตรงกับความเข้าใจของเราหรือเปล่า

คำสั่งย่อยๆ ของ CSS background

  • background-color
    สำหรับการกำหนดสีให้กับ background
    ตัวอย่างการใช้งาน :: body {background-color:#b0c4de;}
  • background-image
    สำหรับการกำหนดฉากหลังหรือ background โดยใช้รูปภาพแทน
    ตัวอย่างการใช้งาน :: body {background-image:url(‘mobile.jpg’);}
  • background-repeat
    สำหรับการกำหนดฉากหลังที่เป็นรูปภาพให้แสดงต่อเนื่องกันไป หรือแสดงเพียงภาพเดียวไม่ต่อเนื่อง
    ตัวอย่างการใช้งาน ::
    body
    {
    background-image:url(‘mobile.jpg’);
    background-repeat:repeat-x;
    }
  • background-attachment
    สำหรับการกำหนดรูปภาพฉากหลังให้เลื่อน/ไม่เลื่อนตามหน้าจอ
    ตัวอย่างการใช้งาน ::
    body
    {
    background-image:url(‘smiley.gif’);
    background-repeat:no-repeat;
    background-attachment:fixed;
    }
  • background-position
    สำหรับการกำหนดตำแหน่งของการแสดงฉากหลัง
    ตัวอย่างการใช้งาน ::
    body
    {
    background-image:url(‘mobile.jpg’);
    background-repeat:no-repeat;
    background-position:right top;
    }

ยังไงก็คงต้องบอกว่า ให้ทดสอบจากการใช้งานจริง เพราะจะทำให้เราเข้าใจคำสั่ง CSS ได้มากกว่านี้ครับ ส่วนสำหรับคนที่ใช้่เครื่องมือในการสร้างเว็บด้วย Joomla หรือ WordPress ก็สามารถนำความรู้นี้ไปประยุกต์ได้เช่นกัน เราอาจไมจำเป็นต้องเขียน CSS ใหม่ แต่สามารถแก้ไขหรือปรับปรงุให้ตรงกับความต้องการของเราได้เช่นกัน