CSS Background เล่นกับแบ็คกราวน์

หลายๆ คน คงคันไม้คันมือเต็มที กับการเน้นสีสันของ DIV การใส่พื้นหลัง ไม่ว่าจะเป็น สี หรือ รูปภาพ ซึ่ง CSS2 มีออปชั่นให้เล่นกันมันมือ

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

เนื่องจากเราสามารถสั่งให้รูปภาพที่เป็นพื้นหลังแสดงอยู่ได้เกือบๆ จะอิสระ ดังนั้นจึงเป็นข้อดีอีกอย่างสำหรับผู้ที่รักในสีสัน เพราะเราสามารถสั่งให้รูปภาพ อยู่ตรงมุม จุด ที่เราต้องการได้

มาดูกันก่อนว่า Property หลักๆ ของรูปภาพพื้นหลังมีอะไรกันมั่ง

1. background
2. background-attachment
3. background-color
4. background-image
5. background-position
6. background-repeat

background

Property หลักของพื้นหลังคือ background เราสามารถใส่ค่า อื่นๆ ตามหลังได้เลย โดยไม่ต้อง พิมพ์ คลาสซ้ำๆ ซึ่งทำให้เราแก้ไขรูปแบบได้ง่ายขึ้น เช่น

background: none;
background-color: #d4ddb0;
background-image: url(background.jpg);
background-position: bottom;
background-repeat: no-repeat;

ซึ่งจากค่าทั้งหมดด้านบน เราสามารถนำมาเขียนค่า Values ลงใน Property ของ background ที่อยู่บนสุดอันเดียว แล้วแสดงผลเหมือนกันได้เลย เช่น

background: #d4ddb0 url(background.jpg) no-repeat bottom;

1.  #d4ddb0 คือสีที่ใช้เป็นพื้นหลัง
2.  url(background.jpg) คือรูปภาพที่ใช้เป็นพื้นหลัง
3.  no-repeat คือการสั่งห้ามทำซ้ำ
4.  bottom คือการวางตำแหน่งให้รูปภาพพื้นหลังอยู่ bottom ตำแหน่งนี้จะอยู่ด้านล่างและจัดกลาง แต่ถ้าจะให้รูปภาพอยู่มุมขวาล่าง เราก็เพิ่ม right เข้าไปหลัง bottom เช่น background: #d4ddb0 url(background.jpg) no-repeat bottom right;