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;