css กับการกำหนด background
คำค้นหา: css background, properties, properties background css, ความหมาย css
1. กำหนดสี Background ด้วย CSS
มาดูตัวอย่าง code css กันดีกว่า
background-color: yellow /* กำหนดสีแบบใส่ชื่อไปเลย */
background-color: #00ff00 /* กำหนดแบบ ใส่รหัสี*/
background-color: transparent /* กำหนดแบบ พื้นใสๆ*/
background-color: rgb(250,0,255) /* กำหนดแบบ */
2. กำหนด Background โดยใส่รูปภาพเข้าไป
background-image:url(‘ใส่ที่อยู่รูปภาพตรงนี้’)
background-image: url(‘bgdesert.jpg’);
background-repeat: repeat; เป็นการกำหนด Background แบบว่าถ้ารูปที่เป็นพื้นหลังมีขนาดเล็กกว่า
พื้นที่ ที่ต้องการใส่ background รูปจะมีการแสดงแบบ วนจนเต็ม
background-image: url(‘bgdesert.jpg’); background-repeat: repeat-y มีการ repat รูป Background แค่แนวตั้ง
background-image: url(‘bgdesert.jpg’);background-repeat: repeat-x มีการ repat รูป Background แค่แนวนอน
background-image: url(‘bgdesert.jpg’);background-repeat: no-repeat ไม่ให้มีการ repeat
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-attachment:fixed; กำหนด แบบคงที่
background-position:center; กำหนด ให้แสดงรูปตรงกลาง
background-image: url(‘smiley.gif’);
background-repeat: no-repeat;
background-attachment:fixed; กำหนด แบบคงที่
background-position: 30% 20%; กำหนด ให้แสดงรูปแบบกำหนดค่าเป็น % โดยค่าแรกเป็น แกน Y (นอน)และตัวหลังเป็นแกน X(ตั้ง)
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px; กำหนด ให้แสดงรูปแบบกำหนดค่าเป็น ค่า px โดยค่าแรกเป็น แกน Y (นอน)และตัวหลังเป็นแกน X(ตั้ง)
background-image: url(‘smiley.gif’);
background-repeat: no-repeat;
background-attachment: fixed เป็นการกำหนดให้พื้นหลังหรือ background อยู่กับที่ไม่มีการเลื่อนไป-มาตามการกด สโครลบาร์
background: #00ff00 url(‘smiley.gif’) no-repeat fixed center; สุดท้ายเป็นการ รวมทุกค่าที่เอยมาข้างต้น คือมีการ กำหนดสี รูป การ repeat กำหนด fixed และตำแหน่ง
ท้ายสุดและสุดท้ายถ้าอยากห็นภาพต้องลองไปทำดูครับ ด้วยความปรารถนาดีจาก สะดุ้ง.คอม





คุณอาจจะสนใจ บทความต่อไปนี้(มั้ง)