ขั้นแรก เป็นเรื่องของรูปที่นำมาใช้ค่ะ สำหรับใครที่ต้องการให้ความกว้างพอดีกับส่วน 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
