เราสามารถกำหนดลักษณะพื้นหลังของ 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 |
ตัวอย่าง
Background
เป็นรูปอยู่ด้านบน
ขวา ไม่ 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>
<br /><br /><br /><br />
</div>
ตัวอย่าง
ตัวอย่าง
Background เป็นรูปอยู่ตรงกลาง ไม่ repeat
<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:no-repeat">
<br /><br /><br /><br />
</div>
ผลลัพธ์<br /><br /><br /><br />
</div>
<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-x">
<br /><br />Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน<br /><br />
</div>
ผลลัพธ์<br /><br />Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน<br /><br />
</div>
Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน
Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง
<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-y">
<br /><br />Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง<br /><br />
</div>
ผลลัพธ์<br /><br />Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง<br /><br />
</div>
Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง
Background เป็นรูป repeart ทั้งแนวนอน และแนวตั้ง
Enjoyday.net
ตัวอย่าง
Background เป็นพื้นสีฟ้า
Enjoyday.net
ตัวอย่าง
Background เป็นรูป Fix
ตัวอย่าง
Background เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar
<div style="background-image:url(../images/bg2.gif); background-repeat:repeat">
<br /><br />Enjoyday.net<br /><br />
</div>
ผลลัพธ์<br /><br />Enjoyday.net<br /><br />
</div>
Enjoyday.net
Background เป็นพื้นสีฟ้า
<div class="output_box" style="background-color:#D7EBFF">
<br /><br />Enjoyday.net<br /><br />
</div>
ผลลัพธ์<br /><br />Enjoyday.net<br /><br />
</div>
Enjoyday.net
Background เป็นรูป Fix
<textarea style="background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px " rows="3">สวัสดีค่ะ
นี่เป็น Background แบบ Fix
รูปจะไม่เลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
นี่เป็น Background แบบ Fix
รูปจะไม่เลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
ผลลัพธ์
ตัวอย่าง
Background เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar
<textarea style="background-image:url(../images/bg1.gif); background-attachment:scroll; width:300px" rows="3">สวัสดีค่ะ
นี่เป็น Background แบบไม่ Fix
รูปจะเลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
นี่เป็น Background แบบไม่ Fix
รูปจะเลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
ผลลัพธ์
