เห็นกระถางน้อยตรงมุมขวาล่างของบลอคมั้ยคะ ? จะเห็นว่าเวลา scroll หน้าเวบลงมา กระถางต้นไม้จะอยู่กับที่ จริง ๆ แล้วเป็นการนำ background สีกับ background อยู่กับที่มาใช้ร่วมกันค่ะ มาดูวิธีทำกันค่ะ

1. ไปที่แก้ไข CSS ด้วยตัวเอง

2. หาคำว่า .site ค่ะ เพิ่มโค้ดข้างล่างลงไปใน .site ค่ะ

background: #fff9fb url(http://jennessa.exteen.com/images/akami.gif) no-repeat fixed right bottom;

หมายความว่า

background: [สีพื้น] [url ของรูปที่จะนำมาทำอยู่กับที่] [กำหนดให้ใช้รูปเดียว] [กำหนดให้รูปอยู่กับที่] [กำหนดให้รูปอยู่ทางขวา] [กำหนดให้รูปอยู่ล่างสุดของหน้าเวบ]

โค้ดนี้เป็นการใช้คำสั่งกำหนด background ในรูปแบบสั้นค่ะ คือรวมหลาย ๆ ค่าไว้ด้วยกัน

3. ตรง right bottom สองค่าหลังเป็นการกำหนดตำแหน่งของรูปนะคะ สามารถกำหนดได้หลายค่า ดังนี้ค่ะ

  • top left
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
  • x% y% ถ้าใส่เป็น 0% 0% คือ top left ค่ะ ถ้าใส่ 100% 100% คือ right bottom
  • xpos ypos เป็นการกำหนดตำแหน่งของรูปได้เลยค่ะ เช่น 15px 20px

4. เมื่อเลือกตำแหน่งที่ต้องการให้รูปแสดงได้แล้วก็ Save ได้เลยค่ะ

เทคนิคนี้อาจจะนำมาใช้ในการทำ background สีเรียบ ๆ ให้ดูน่าสนใจ หรือเอาไว้ใช้ประกาศข่าว หรือใส่รูปตามเทศกาลต่าง ๆ เช่น วันวาเลนไทน์ ก็เอารูปหัวใจโต ๆ มาใส่ไว้ หรือวันเกิด ก็เอาเค้กมาไว้บนหน้าจอ เก๋ไปอีกแบบ ลองนำไปใช้ได้หลายแบบค่ะ ถ้าทำไม่ได้ ติดปัญหาอะไร ก็ทิ้งคำถามไว้นะคะ (^^)V

credit : เจนเนสซ่า

Comment

Comment:

Tweet

ขอบคุณค้า

#5 By luner on 2013-04-17 11:55

#4 By Joe Shop@JJ on 2012-04-21 02:37

นู๋งงอ่า ช่วยอธิบายนู๋ที คือนู๋อยากลองทำบล็อกดูบ้าง แต่ทำม่ายเปันง่า หาโค้ดม่ายด้าย ล่ะกะม่ายรู้ใส่ยังงัยด้วยง่า
embarrassed

#3 By เมเม่ (85.165.138.209) on 2011-07-21 20:52

ขอบคุณมากค๊า >W</

#2 By ParkJungKyeo on 2011-04-03 05:46

งงมากมาก

#1 By (125.25.214.47) on 2010-05-01 20:07