Munu
Background
เราสามารถกำหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น <body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้น
Property Description Values
background-attachment ใช้กำหนดว่าต้องการให้ภาพพื้นหลังนั้นอยู่กับที่ หรือว่าเลื่อนไปตาม Scroll Bar fixed
scroll fix อยู่กับที่
เลื่อนตาม Scroll Bar
background-color ใช้กำหนดทั้งสี พื้นหลังของเว็บเพจ หรือ ตาราง color-rgb
color-hex
color-name
transparent รหัสสี
ชื่อสี
background-image ใช้กำหนดรูปภาพ ให้พื้นหลังของเว็บเพจ หรือตาราง url ของรูป เช่น url(images/bg.jpg)
background-position
ใช้กำหนดตำแหน่งการจัดวางรูปภาพพื้นหลัง top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat กำหนดรูปภาพพื้นหลังว่าต้องการให้มีการเรียงต่อรูปภาพหรือไม่ repeat
repeat-x
repeat-y
no-repeat ไม่ให้มีการวางต่อรูปภาพ
วางต่อรูปภาพแนวนอน
วางต่อรูปภาพแนวตั้ง
วางต่อรูปภาพทั้งแนวนอนและตั้ง
background เราสามารถกำหนด property ให้กับ background ได้ในคำสั่งประกาศเดียว background-color
background-image
background-repeat
background-attachment
background-position
ExampleBackground เป็นรูปอยู่ด้านบน ขวา ไม่ repeat
<div style=”background-attachment:scroll; background-image:url(../images/bg1.gif); background-position:top right; background-repeat:no-repeat”>
<br /><br /><br /><br />
</div>
Output
ExampleBackground เป็นรูปอยู่ตรงกลาง ไม่ repeat
<div style=”background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:no-repeat”>
<br /><br /><br /><br />
</div>
Output
ExampleBackground เป็นรูปอยู่ตรงกลาง repeart แนวนอน
<div style=”background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-x”>
<br /><br />Enjoyday.net<br /><br />
</div>
Output
Enjoyday.net
ExampleBackground เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง
<div style=”background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-y”>
<br /><br />Enjoyday.net<br /><br />
</div>
Output
Enjoyday.net
ExampleBackground เป็นรูป repeart ทั้งแนวนอน และแนวตั้ง
<div style=”background-image:url(../images/bg2.gif); background-repeat:repeat”>
<br /><br />Enjoyday.net<br /><br />
</div>
Output
Enjoyday.net
ExampleBackground เป็นพื้นสีฟ้า
<div class=”output_box” style=”background-color:#D7EBFF”>
<br /><br />Enjoyday.net<br /><br />
</div>
Output
Enjoyday.net
ExampleBackground เป็นรูป Fix
<textarea style=”background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px ” rows=”3″>สวัสดีค่ะ
นี่เป็น Background แบบ Fix
รูปจะไม่เลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
Output
ExampleBackground เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar
<textarea style=”background-image:url(../images/bg1.gif); background-attachment:scroll; width:300px” rows=”3″>สวัสดีค่ะ
นี่เป็น Background แบบไม่ Fix
รูปจะเลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
Output
