ไม่รู้ว่าท่านอื่นใช้เทคนิคไหนนะครับ ส่วนตัวผมใช้แบบนี้ครับ
แบบ css2 ถ้า css3 จะง่ายแต่ใช้ไม่ได้กับ ie8 ลงไป
1. ใส่ bg ให้กับ <body> แบบปกติ ครับ
2. กำหนด <div class=bg1></div>ขึ้นมา แล้วกำหนดขนาด สูง กว้าง แล้วกำหนด bg (ขนาดตามใจชอบ)
3. กำหนด <div class=wraper></div>แล้วเขียน css ให้ class=wraper ไปทับ bg1 ครับ ด้วย margin-top:ค่าลบpx; เช่น margin-top:-400px;
โค้ดตัวอย่าง
code html
<body>
<div class=bg1></div>
<div class=wraper></div>
</body>
code css
body{ background:url(theme/bg-tile.png) center top repeat-x; margin:0; padding:0;}
.bg1{ background:url(theme/bg-main.png) center top no-repeat; height:440px; margin:0;}
.wraper{margin:-400px 0 0;}
ส่วนแบบ css3
div.test {
background-image: url(../image_1.gif), url(../image_2.gif);
background-repeat: repeat-y;/*รีพีตตามแกน y*/
background-position: top left, top right;/*ตำแหน่งรูปที่1, ตำแหน่งรูปที่2*/
width: 385px;
height: 100px;
border: 1px solid #000000;
}
ปักหมุด & แบ่งปัน
