css-learning: css backbround

background การกำหนดลักษณะพื้นหลัง

คุณสมบัติของ backgrounds ใช้เพื่อกำหนดรูปแบบพื้นหลังในแต่ละองค์ประกอบของเว็บไซต์ ซึ่งคุณสมบัติของ css ที่ใช้กำหนดคุณสมบัติของ backgrounds นั้นมีดังนี้

background-color
background-image
background-repeat
background-attachment
background-position

background color

คุณสมบัติของ backgournd color เป็นการกำหนดสีพื้นหลังของ element ต่างๆ ในการกำหนด backgournd color ให้กับเว็บเพจจะกำหนดไว้ในส่วนของ body

การกำหนดสี background ให้กับเว็บเพจ

body{background-color:#FF0000;}

นอกจาำกกำหนดสีให้กับพื้นหลังเ็ว็บเพจแล้ว ยังสามารถกำหนดสีพื้นหลังให้กับ elements ได้อีก

การกำหนดสี background ในส่วนของ elements ต่างๆ

span{background-color:#FF0000;}
p{background-color:#00FF00;}
div{background-color:#0000FF;}

backgournd images

คุณสมบัติของ background images เป็นการกำหนดโดยการใช้รูปภาพเป็นพื้นหลังให้กับ element ต่างๆ ของ html

การกำหนดรูปภาพให้เป็น background

body{background-image:url(bg_image.jpg);}

background repeat ให้ซ้ำแนวตั้ง หรือแนวนอน

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

การกำหนด background images ให้ซ้ำแนวตั้ง หรือแนวนอน

ซ้ำแนวตั้ง:
body{
   background-image:url(bg_image.jpg);
   background-repeat:repeat-y;
}

ซ้ำแนวนอน:
body{
   background-image:url(bg_image.jpg);
   background-repeat:repeat-x;
}

*declarations ที่ใช้ก็คือ background-repeat:repeat-x; ตามแนวนอน หรือ background-repeat:repeat-y; ตามแนวตั้ง

กำหนดตำแหน่ง backgournd images และไม่ให้วนซ้ำ

เพื่อให้ background images แสดงยังตำแหน่งที่ต้องการ และให้แสดงเพียงครั้งเดียวไม่วนซ้ำใน elements ใดๆ ของ html

กำหนดตำแหน่ง backgournd images และไม่ให้วนซ้ำ

body{
   background-image:url(bg_image.jpg);
   background-position:left top;
   background-repeat:no-repeat;
}

*declarations ที่ใช้กำหนดตำแหน่งในที่นี้ คือ background-position:left top; เพื่อกำหนดตำแหน่งของ background images ให้แสดงทางด้านซ้ายบน
*declarations ที่ใช้กำหนดให้แสดงผล background images เพียงแค่ครั้งเดียวไม่วนซ้ำ คือ background-repeat:no-repeat;

background attechment

กำหนดให้ background คงที่หรือ วิ่งขึ้น วิ่งลง ตามการใช้ scrolls ซึ่งคุณสามารถกำหนด values ได้ดังนี้

scroll
fixed
inherit

กำหนด background คงที่หรือ วิ่งขึ้น วิ่งลง

body{
   background-image:url(bg_image.jpg);
   background-position:left top;
   background-repeat:no-repeat;
   background-attachment:fixed;
}

*คุณสามารถกำหนดค่า values ได้ตามที่คุณต้องการ ดังที่กล่าวมาแล้วข้างต้นนั้นก็คือ scroll, fixed, inherit

ทำความรู้จักกับ css ก่อนเริ่มเขียน css syntax และส่วนประกอบของ css id และ class รูปแบบการเขียน css การกำหนดลักษณะของ html โดยใช้ css background การกำหนดลักษณะพื้นหลัง text การกำหนดลักษณะข้อมูล font การกำหนดลักษณะตัวอักษร link การกำหนดลักษณะลิงค์ list การกำหนดลักษณะลิสต์ table การกำหนดลักษณะตาราง css model แบบจำลองของ css องค์ประกอบของ css model border ขอบเขตของข้อมูล margin padding