ลองใส่ bg เพิ่มสีสันให้บล็อกกันค่ะ

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

ขั้นแรก เป็นเรื่องของรูปที่นำมาใช้นะคะขนาดของรูปไม่ได้ฟิคตายตัวค่ะ ว่าจะต้องมีขนาดกว้างยาวเท่าไหร่ แต่ แนะนำว่าไม่ควรมีขนาดใหญ่เกินไปค่ะ เพราะจะทำให้หน้าเพจของบล็อกแสดงผลได้ช้าค่ะ เมื่อได้ขนาดของรูปตามต้องการแล้ว ก็แต่งให้เต็มที่ด้วยโปรแกรมตกแต่งรูปภาพทั่วไปค่ะ ตอน save รูป save เป็นไฟล์ .jpg หรือ .gif นะคะ

ขั้นที่ 2 เราจะต้องอัพโหลดไฟล์รูปภาพ ขึ้นมาไว้ในไฟล์อัลบั้มของเราก่อนค่ะ ดูวิธีการอัพโหลดไฟล์ที่นี่เลยค่ะ วิธีการอัพโหลดไฟล์

ขั้นที่ 3 มาดูโค๊ดที่ใช้กันค่ะ
CSS code ที่ใส่ในการตกแต่ง

div#page-wrapper {
              background:#FCA4E9;
            background-image: url("http://learners.in.th/file/tozusu/titlepink.gif");
              background-repeat:repeat;}

background คือ ส่วนของโค๊ดสีของพื้นหลังค่ะ ถ้าต้องการเปลี่ยนสีพื้นหลังอย่างเดียวก็ใส่โค็ดบรรทัดนี้เข้าไปอย่างเดียวก็ได้ค่ะ
background-image คือ ไฟล์รูปภาพที่จะนำมาใส่ค่ะ เราจะต้องเอา url ของไฟล์รูปที่เราอัพโหลดในขั้นที่2 มาใส่ในวงเล็บค่ะ
background-repeat คือ การกำหนดใส่แสดงรูปซ้ำจนเต็มพื้นที่ค่ะ เช่นถ้ารูปเราเล็กกว่าขนาด title ที่เว็บกำหนดไว้ ก็เขียนคำสั่งให้แสดงรูปต่อๆ กันจนเต็มค่ะ

ขั้นที่ 4 นำโค๊ดไปใช้งานจริงกันค่ะ โดยการ copy โค๊ดในขั้นที่3 แล้วเปลี่ยนบางส่วนให้เป็นของเราค่ะ จากนั้นก็นำไปวางในหน้า ตกแต่งบล็อก แนะนำการตกแต่งบล็อก, ตกแต่งแพลนเน็ต แนะนำการตกแต่งแพลนเน็ต หรือ ตกแต่งหน้าประวัติ แนะนำการตกแต่งแพลนเน็ต ก็ได้ค่ะ ไว้ในส่วนที่เขียนว่า "CSS ที่ตกแต่งมาเอง" นะคะ ซึ่งโค๊ด css ส่วนต่างๆ สามารถนำมาต่อกันได้ค่ะ โดยโค็ดแต่ละส่วนจะต้องมีปีกกาเปิดและปิดเป็นตัวกั้นค่ะ เช่น
       div#title{..............
   .............}
       body{............
                  .............}

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

สุดท้ายก็เหมือนเดิมค่ะ มี bg มาฝากให้ลองไปใช้เล่นๆ ก่อนลงมือทำจริงๆ ค่ะ