CSS Backgrounds การแต่งพื้นหลังหน้าเว็บแบบต่าง ๆ
CSS Backgrounds การแต่งพื้นหลังหน้าเว็บแบบต่าง ๆ
พื้นหลัง เป็นสิ่งที่ต้องสนใจอย่างมากในการทำเว็บไซต์ การออกแบบพื้นหลังที่ดีสวยงาม สบายตา จะทำให้ผู้เข้าชมเว็บไซต์ รู้สึกดีอยากอ่านบทความที่เราสร้างขึ้น ดังนั้น ในบทความนี้ เรามาดูวิธีใส่พื้นหลังแบบต่าง ๆ กันครับBackground Properties
ก่อนอื่น เรามาดู Property ของ background ที่ใช้ได้กันก่อนครับ ตามตารางด้านล่างเลย| Property | Description | CSS |
|---|---|---|
| background | เซตค่า background ต่าง ๆ ทั้งหมด | 1 |
| background-attachment | กำหนดว่าเป็นแบบ fixed หรือ scroll | 1 |
| background-color | กำหนดสีของ background | 1 |
| background-image | กำหนดรูปภาพให้ background | 1 |
| background-position | กำหนดตำแหน่งของ background | 1 |
| background-repeat | กำหนดการซ้ำกันของ background | 1 |
| background-clip | กำหนดพื้นที่สำหรับการใส่พื้นหลัง | 3 |
| background-origin | กำหนดพื้นที่การวางของ background | 3 |
| background-size | กำหนดขนาดของรูปภาพ background | 3 |
ดู Property กันไปแล้ว เรามาดูตัวอย่างกันดีกว่าครับ
Background Color
การใส่สีให้กับ background เป็น property ที่ใช้บ่อยมากในการทำเว็บ ซึ่งการกำหนดสี่นั้นก็ทำได้หลายวิธี ดูตัวอย่างด้านล่างครับกำหนด background ให้มีสีดำ
background-color:#000000;การแสดงผล
กำหนด background ให้มีสีแดง
background-color:red;การแสดงผล
กำหนด background ให้มีสีน้ำเงิน
background-color:rgb(0,0,255);การแสดงผล
การใส่สี ให้กับ property นั้นสามารถใส่ได้หลายวิธี ดูวิธีการใส่สีและรหัสสีแบบอื่น ๆ ได้ที่ CSS Color
Background Image
การใส่ รูปภาพ ให้กับ background นั้น ก็ใช้บ่อยเหมือนกัน ดูตัวอย่างวิธีการใส่รูปภาพได้ ตามตัวอย่างด้านล่าง background-image:url("admin.jpg"); การแสดงผล Background repeat
เป็นการกำหนดความซ้ำกันของรูปภาพ ดังตัวอย่างด้านล่าง background-image:url("http://www.doesystem.com/admin.jpg"); background-repeat:no-repeat; การแสดงผล background-attachment
กำหนดพฤติการณ์เกี่ยวกับ background ดังตัวอย่างด้านล่าง background-image:url("http://www.doesystem.com/admin.jpg"); background-repeat:no-repeat; background-attachment:fixed; overflow:scroll; background-image:url("http://www.doesystem.com/admin.jpg"); background-repeat:no-repeat; background-attachment:scroll; overflow:scroll;