พื้นหลังโดยปกติของข้อความในบล็อกจะเป็นสีขาวนะคะ วันนี้ก็เลยมาแนะนำการตกแต่งบล็อกส่วนนี้กันบ้าง ของอนุญาตเรียกส่วนนี้ว่าส่วน “content2” นะคะ อย่างที่เห็นในบล็อกนี้ก็จะเป็นรูปดอกไม้ค่ะ อยากตกแต่งรูปพื้นหลังส่วนนี้บ้างก็ไม่ยากค่ะ มาดูขั้นตอนกันเลย<div class="content">

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

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

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

div#content2 {
background-image: url("http://gotoknow.org/file/tozusu/content2flower640.jpg");
background-repeat:no-repeat;
background-position:right top;
}

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

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

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

 
http://learners.in.th/file/tozusu/content2x%27mas.jpg


http://learners.in.th/file/tozusu/content2cat640.jpg

</div>