ตัวอย่าง CSS การใส่รูปพื้นหลัง (background) ของบล็อก

  ติดต่อ

ระบบบล็อกของ GotoKnow สามารถตกแต่งรูปลักษณ์ได้สารพัดค่ะ แต่ผู้ใช้ควรจะมีความเข้าใจเรื่อง CSS บ้างนะค่ะ เพราะแก้โน่นแก้นี่อาจจะเกิดข้อผิดพลาดขึ้นมาได้ค่ะ

คราวที่แล้ว ดิฉันแนะนำเรื่อง การเปลี่ยนชุดสีของบล็อก และ การใส่รูปในส่วนหัวของบล็อกไปแล้ว

วันนี้ก็มีมาให้สนุกกันอีกค่ะด้วยการใส่รูปพื้นหลังของบล็อก

ผลลัพธ์ที่ได้จะมีหน้าตาดังนี้นะค่ะ ดูตัวอย่างที่ http://Cat.GotoKnow.org นะค่ะ

ขั้นตอน 1 ดิฉันทำรูปเท้าแมวขนาดเล็กมาก  ประมาณ 15 x 15 pixels แล้วนำขึ้นไปไว้ในไฟล์อัลบั้ม แล้ว copy ลิงค์ที่อยู่ของรูป (http://gotoknow.org/file/jantawan/catfoot.gif) มาใส่ใน CSS

ขั้นตอน 2 ดิฉันต้องปรับขนาดหน้าต่างให้เล็กลงหน่อยค่ะ เดิมเราตั้งไว้ที่ 970 pixels ดิฉันปรับลดมาเป็น 810 px และต้องลดขนาด sidebar ด้านข้างด้วยค่ะ เป็น 221 px และลดขนาดพื้นที่บันทึกเป็น 579 px นะค่ะ การลดขนาดต้องให้ได้อัตราส่วนนะค่ะ ไม่อย่างนั้น จะดูไม่สวยงาม และอาจมีปัญหาในการแสดงกับ browser แต่ละตัวค่ะ

CSS สำหรับขั้นตอน 2 คือ

div#container {width: 810px;}
div#content2 {float: right; width: 579px;}
div#sidebar2 {float: left; width: 221px;}

นอกจากนี้ จะสังเกตว่า ดิฉัน เปลี่ยนสลับด้านระหว่างส่วน sidebar กับส่วน contents นะค่ะ แต่คุณไม่อยากสลับ ก็ไม่ต้องใส่ float: right; กับ float: left; ลงไปนะค่ะ

ซึ่งก็เช่นเดิม CSS ที่ตกแต่งเองนี้จะนำไปใส่ไว้ที่ แผงควบคุม > บล็อกที่เลือก > แก้ไข > CSS ที่ตกแต่งเอง

ขั้นตอน 3 มาดู CSS สำหรับการใส่รูปพื้นหลัง

body
{
background: #ffffff;
background-image:
url("/file/jantawan/catfoot.gif");
background-repeat: repeat;
}

ศึกษาเพิ่มเติม option ของ CSS สำหรับการทำ background (http://www.w3schools.com/css/css_background.asp) 

เอาละค่ะ ลองลับสมองศิลปินในตัวกันออกมาหน่อยนะค่ะ และ ขอเชิญทุกท่านช่วยร่วมเล่าแลกเปลี่ยนเรียนรู้ประสบการณ์ของท่านในการฝีกทำรูปพื้นหลังกันหน่อยนะค่ะ หรือ ทำ CSS เพื่อให้สมาชิกท่านอื่น copy ไปใช้ได้เลย แล้วติดป้ายคำหลักของบันทึกว่า css และ รูปพื้นหลัง นะค่ะ

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

http://gotoknow.org/post/tag/รูปพื้นหลัง

http://gotoknow.org/post/tag/css

ขอบคุณค่ะ

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

บันทึกนี้เขียนที่ GotoKnow โดย 

หมายเลขบันทึก: 55838, เขียน: , แก้ไข, , สัญญาอนุญาต: สงวนสิทธิ์ทุกประการ, ความเห็น: 15, อ่าน: คลิก

คำสำคัญ (Tags) #รูป#css#รูปพื้นหลัง

บันทึกล่าสุด 

ความเห็น (15)

  • อาจารย์มีเรื่องดีๆท้าทายมาให้ฝึกบ่อยๆนะครับ
  • ขอบคุณมากครับผม

ลองเลยค่ะอ.ขจิต แล้วอย่าลืมอ่าน CSS ที่ลิงค์ไว้ด้วยนะค่ะ จะได้ทราบ option เพิ่มเติม เช่น

repeatThe background image will be repeated vertically and horizontally
repeat-xThe background image will be repeated horizontally
repeat-yThe background image will be repeated vertically
no-repeatThe background-image will be displayed only once

ที่มา:

http://www.w3schools.com/css/css_background.asp

อำนวย สุดสวาสดิ์
IP: xxx.4.139.129
เขียนเมื่อ 
  • อาจารย์มีของเล่นใหม่มาอีกแล้ว +ขอบคุณครับ+
  • จะลองทำตามที่อาจารย์แนะนำดูครับ
  • เป็นกำลังใจให้อาจารย์ ในการพัฒนาระบบต่อไปครับ
น้องนิว
IP: xxx.29.37.240
เขียนเมื่อ 

อิอิ  เดี๋ยวนิวจะลองทำดูคะอาจารย์ ขอบพระคุณคะ

  • ไม่ลืมหรอกครับอาจารย์
  • จะลองทำดูครับ
  • ลองทำแล้วครับอาจารย์
  • มารายงานผล
  • เป็นนดอกกุหลาบสีแดง สวยไหมครับ
  • ขอบคุณมากครับที่แนะนำ

ขอขอบคุณอาจารย์จันทวรรณ...

  • ภาพจ่าหน้าบล็อก cat.gotoknow.org ดูดี (good looking) และดูเป็นมืออาชีพ (look professional) มากครับ
Oscar
เขียนเมื่อ 

My Blog ครับ ส่งเข้าประกวด

 

ดีค่ะ แต่อาจจะลดความเข้มแสงลงนิด จะได้ไม่ลายตาเวลาอ่านนะค่ะ ไม่เป็นไรนะค่ะ ลองไปเรื่อยๆ ค่ะ เป็นการฝึกวิทยายุทธค่ะ :)
ขอบคุณอาจารย์หมอวัลลภค่ะ :)
bawrin
เขียนเมื่อ 

ผมทำ theme ไว้แล้วหลายอันครับแต่เอามาทำหัวบล็อกไม่เป็น  เนื่องจากเพิ่งมาสมัครสมาชิกเลยไม่รู้วิธีทำที่ท่านอาจารย์นำเสนอไว้ครั้งก่อน

ถ้ารบกวนอาจารย์ช่วยตอบทาง E-mail ให้ผมอีกครั้งได้มั๊ยครับ...

ขอบคุณครับ

ขอบคุณมากๆนะคะ บล็อคของหนูสวยมากๆเลยคะ เพราะมีพื้นหลังคะ ^^

อาจารย์ค่ะมีเรื่องสงสัย 2 เรื่องค่ะ

1. css มันหายไปไหนค่ะเข้าไปในแผงควบคุมแล้วเลือกบล็อคที่ต้องการแก้ไขแล้ว พบหน้าที่แก้ไขบล็อค...มีชื่อบล็อค ที่อยู่ ปรับแต่ง รายละเอียด แต่ทำไมไม่มีช่องcss ค่ะ ทำผิดพลาดตรงไหนเหรอค่ะ พยายามหาจากหลายที่แล้วไม่พบค่ะ

2. หัวบล็อคต้องทำภาพขนาดเท่าไหร่ค่ะจึงจะเหมาะ แล้วก็หา css ไม่เจอนำรูปที่ทดลองทำมาลงไม่ได้ค่ะ

E*kang
เขียนเมื่อ 

อ.คะนู๋เป็นนักศึกษาภาคกศบป.ของมหาวิทยาลัยราชภัฎนครศรีธรรมราช

นู๋อ่านความรู้ที่อาจารย์แนะนำ หรือให้ดูมา ดีม๊ากมายเลยคะ  ของลูกศิษย์อาจารย์ด้วย

แต่นู๋ยังทำไม่ได้ว่าใส่ CSS ตรงไหน งัยถ้าอ.ว่าแนะนำด้วยนะคะ

ที่นู๋เกรียนอ.เค้าไม่สอนอะไรเลยบอกแต่ให้สมัครบล็อก

ขอบคุณคะ

อีเมล์นู๋คะ [email protected]

ดูที่ http://gotoknow.org/post/tag/css ค่ะ