การทำพื้นหลังBG

 เมื่อบันทึกก่อนครูอิงได้เล่าประสบการณ์เรื่องการเปลี่ยนภาพที่หัวบล็อกไปแล้ว บันทึกนี้ครูอิงจะเล่าถึงประสบการณ์การทำภาพพื้นหลัง (BACKGROUND)

       บล็อก "ลานดินกลิ่นหญ้า" ที่เห็นอยู่ขณะนี้ ครูอิงใส่โค้ดนี้ใน CSS ค่ะ (เข้าไปที่จัดการบล็อก  เลือกตกแต่ง   เลือก แก้ไข  CSS ที่ตกแต่งมาเอง)

div#subtitle {background:#4F94CD;}

div#ribbon{background:#36648B;}

(1) div#page-wrapper {background-image: none;}

(2) div#page-wrapper {background-image:url(http://gotoknow.org/file/siriporn5633/suiren-4.jpg);} 

(3)div#title{font-size: big; color:#836FFF; background:#F0FFFF; background-image:url(http://gotoknow.org/file/ruschadawon/untitled305.GIF);background-repeat:no-repeat;background-position:bottom;   height:420px;}
 

(4) <STYLE>TABLE {background-color: transparent;border-style: none;border: 1;-spacing: none;}TD {border: none;border-color: none;background: none;}</STYLE><STYLE>body{background-image:url("http://gotoknow.org/file/ruschadawon/untitled293.jpg");}</STYLE><STYLE>body{background-attachment: fixed;}</STYLE>

ส่วนที่ (1) คือ ส่วนที่เราเขียนบันทึกค่ะ  เป็นส่วนที่เป็นเหมือนกล่องข้อความสีขาวพาดอยู่ตรงกลางหน่ะค่ะ เรียกว่า  page จะสังเกตว่าไม่ว่าจะใช้ธีมใด ก็จะเป็นสีขาว ถ้าเราต้องการตัดกล่องสีขาวออกไป ก็จะต้องใส่คำว่า -wrapper ต่อท้ายค่ะ หน้าบล็อกของเพื่อน ๆ ก็จะเป็นสีเดียวกับภาพพื้นหลังทั้งหมด ไม่มีพาดขาวตรงกลาง อย่างเช่นบล็อกของครูอิง บล็อกนี้หน่ะค่ะ http://gotoknow.org/blog/ruschadawon-taltal/303000 ลองคลิ๊กไปดูนะคะ

ส่วนที่ (2) ครูอิงต้องการใส่ภาพพื้นหลัง ใน page ครูอิงก็ copy   (URL)  ของภาพคือเจ้าตัวนี้ http://gotoknow.org/file/siriporn5633/suiren-4.jpg ไปใส่ในวงเล็บหน่ะค่ะ(วิธีหา(URL) ของภาพอยู่ในบันทึกที่แล้วนะคะ) ก็จะได้พื้นหลังใน page เป็นลายดอกไม้สีฟ้า ๆ นี่ไงคะ ต้องไม่ลืมใส่-wrapper นะคะ

ส่วนที่ (3) ตรงนี้เป็นส่วนของหัวบล็อก ที่ครูอิงนำเสนอไปแล้ว เมื่อบันทึกที่แล้ว ผ่านเลยนะคะ

ส่วนที่ (4) ตรงนี้เป็นส่วนของด้านข้างทั้งสองข้าง ซึ่งของครูอิงจะเป็นภาพนี้ค่ะ

ไม่ทราบเพื่อน ๆ สังเกตกันหรือไม่ว่า ภาพพื้นหลังด้านข้างส่วนมากจะเลือนขึ้นเลื่อนลงได้ ครูอิงไม่ชอบเลยค่ะ ครูอิงอยากให้ มันหยุดอยู่กับที่ เมื่อครูอิงใส่ (URL) ของภาพคือเจ้าตัวนี้ http://gotoknow.org/file/ruschadawon/untitled305.GIF ไปในวงเล็บเสร็จ ครูอิงก็จะต่อท้ายด้วยคำนี้ค่ะ  fixed  แค่นี้ ภาพด้านข้างของครูอิงก็จะหยุดอยู่กับที่หล่ะค่ะ  ลองดูซิคะ 

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

         ส่วนมากครูอิงจะใช้บริการภาพพื้นหลังจากที่นี่ค่ะ http://www.bloggang.com/viewdiary.php?id=auntymod&month=07-2005&date=15&group=12&blog=1

ชอบพื้นหลังสีอะไร คลิ๊กเอา (URL) ไปเปลี่ยนในวงเล็บ  (4)