วิธีการทำรูปพื้นหลัง (Background Image) ของเว็บเพจไม่ให้กระทำซ้ำ [Article ID : 16]

เรื่อง : การทำรูปภาพ Background ไม่ให้กระทำซ้ำ (Background No Repeat)

บางครั้งของการออกแบบ Web Page เราต้องการใส่รูปภาพเป็น Background หรือเป็นฉากด้านหลังของ Web Page แต่บางครั้งก็อีกที่เราต้องการ Background เพียงแค่รูปเดียวโดด ๆ ในการเป็นภาพพื้นหลัง แต่ก็จะมีปัญหาตามมา คือ เมื่อเรานำรูปที่จะนำมาเป็นพื้นหลังของเพจ รูปภาพมักจะกระทำซ้ำให้อัตโนมัติ หลายรูปจนเต็มพื้นของเว็บ เราจะมีวิธีใดในการเซ็ทให้รูปภาพแสดงแค่ภาพเดียวเป็นภาพพื้นหลังได้ อยากรู้ก็เชิญอ่านกันได้เลยครับ...

แสดงเว็บเพจที่มีรูปพื้นหลังแสดงซ้ำๆ

เทคนิคการทำให้ภาพพื้นหลังไม่แสดงซ้ำ

เปิดไฟล์เว็บเพจของเราขึ้นมา จากนั้นให้ปฏิบัติตาม ดังนี้

1. ที่ Page Properties ให้เราเลือกที่ Appearence (CSS)
(Menu -> Modify -> Page Properties)
2. ในส่วนของ Option ด้านขวามือเลือกที่ Background Image: ทำการ Browse.. เลือกรูปภาพที่ต้องการนำมาใช้เป็นพื้นหลัง
3. จากนั้นให้ทำการกำหนดค่าที่ Repeat: ดังรูป *เลือกที่ no-repeat
4. ทำการคลิกที่ปุ่ม OK ของหน้าต่าง Page Properties จะพบว่ารูปภาพ Background จะไม่แสดงซ้ำเป็นหลาย ๆ รูปแล้ว

สาเหตที่รูปภาพพื้นหลังไม่แสดงซ้ำ

จากข้างต้นเมื่อเรากำหนด Option ในส่วนของ Background Image ให้เป็น no-repeat แล้ว รูปภาพจึงไม่แสดงซ้ำ นั่นเพราะว่า CSS มีความสามารถในการกำหนดการแสดงผลของพื้นหลังได้หลากหลาย และจากตรงนี้นี่เอง เราสามารถนำไปใช้ในส่วนอื่นของเว็บเพจ เช่น ที่ตาราง หากเราต้องการใช้รูปภาพนำมาเป็นพื้นหลังแล้ว ไม่ให้มีการแสดงซ้ำ ก็สามารถกระทำได้เช่นเดียวกัน โดยให้ทำการกำหนดค่า CSS ของ Background เป็น no-repeat ดังรูป *อ่านเรื่องการใช้งาน CSS เพิ่มเติม

สำหรับในส่วนของการกำหนดคุณสมบัติของภาพพื้นหลังโดยใช้ CSS เรายังสามารถกำหนดการแสดงผลในรูปแบบอื่น ๆ ได้อีก เช่น ต้องการให้แสดงซ้ำตามแนวนอน (แกน x) หรือตามแนวตั้ง (แกน y) หรือต้องการกำหนดที่มีระยะแน่นอนก็สามารถกระทำได้ครับ ซึ่งฝากให้ผู้อ่านได้ทำการทดลองกำหนดค่า ศึกษากันดูด้วยตนเองต่อไป...สวัสดีครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

สร้าง Web Application ด้วย Dreamweaver + PHP + MySQL การเตรียมพร้อมและข้อตกลงในการเรียนรู้

เรื่อง :: การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 1สำหรับบทความนี้ก็จะเป็นบทความชุดนะครับคือใน 1 เร...  

สร้างระยะเยื้องให้บรรทัดแรกของข้อความย่อหน้า (text-indent)

เรื่อง : สร้างระยะเยื้องให้บรรทัดแรกของย่อหน้าด้วย Dreamweaver หลายท่านคงมีปัญหา เมื่อทำการพิมพ์ข้อความที่เป็นเนื้อหาของห...  

การออกแบบเว็บเพจให้ชิดขอบของ Web Browser

เรื่อง : วิธีทำให้ Web Page ชิดขอบของ Web Browser หากการออกแบบ Web Page แล้วมีปัญหาในเรื่องของการแสดงผลว่า...ทำไมเว็บเพจ...  

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 4 [จบ]

ในตอนที่ 3 ที่ผ่านมาเราได้ทำการสร้างตารางสำหรับการแสดงผลเตรียมรอไว้แล้ว มาในตอนที่ 4 นี้ เราจะมาทำการสร้างโปรแกรมสำหรับให้ผู้เยี่ย...