CSS background property : สอน property ของ background property, เรียน property ของ background property
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • background-color ใช้กำหนดสีให้กับพื้นหลัง
    background-image ใช้กำหนดพื้นหลังเป็นรูปภาพ
    background-repeat ใช้กำหนดให้แสดงรูปภาพแบบวนซ้ำหรือไม่
    background-attachment ใช้กำหนดว่าให้รูปภาพพื้นหลัง อยู่กับที่ หรือ เลื่อนตาม เมื่อมีการเลื่อนแถบเลื่อน
    background-positionY ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านบน
    background-positionX ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านซ้าย
    background-position ใช้กำหนดค่าของ property background-positionY และ background-positionX
    background ใช้กำหนดค่าต่างๆของ property background
  • content :
    ใช้กำหนดสีให้กับพื้นหลัง

    value :
    ชื่อสี, transparent, #ค่าสี, rgb( ตัวเลข, ตัวเลข, ตัวเลข )

    example :
    { background-color: rgb( 255, 0, 125); }

    property :
    background-color

  • property :
    background-image

    value :
    none, url(ชื่อไฟล์.นามสกุล)

    content :
    ใช้กำหนดพื้นหลังเป็นรูปภาพ

    example :
    { background-image: url( image/panda.png ); }

  • property :
    background-repeat

    value :
    repeat-x, repeat-y, repeat, no-repeat

    content :
    ใช้กำหนดให้แสดงรูปภาพแบบวนซ้ำหรือไม่

    example :
    { background-repeat: no-repeat; }

  • property :
    background-attachment

    value :
    fixed, scroll

    content :
    ใช้กำหนดว่าให้รูปภาพพื้นหลัง อยู่กับที่ หรือ เลื่อนตาม เมื่อมีการเลื่อนแถบเลื่อน

    example :
    { background-attachment: fixed; }

  • property :
    background-positionY

    value :
    top, center, bottom, ค่าเปอร์เซ็นต์, ค่า px

    content :
    ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านบน

    example :
    { background-positionY: 5px; }

  • property :
    background-positionX

    value :
    left, center, right, ค่าเปอร์เซ็นต์, ค่า px

    content :
    ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านซ้าย

    example :
    { background-positionX: 1%; }

  • property :
    background-position

    content :
    ใช้กำหนดค่าของ property background-positionY และ background-positionX ได้พร้อมกันตามลำดับ

    example :
    { background-position: 5px 1%; }

  • property :
    background

    content :
    ใช้กำหนดค่าของ property background-color, background-image, background-repeat,
    background-attachment, background-position ได้พร้อมกันตามลำดับ

    example :
    { background: #ccff00 url(panda.gif) no-repeat fixed 5px 1%; }

 
Share This Chapter Login with Facebook