วิธีการทำรูปพื้นหลัง (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

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

CSS Layout ด้วย Dreamweaver ตอนที่ 2

เรื่อง : CSS Layout ด้วย Dreamweaver ตอนที่ 2เมื่อเราได้ทำการกำหนดโครงสร้างของเว็บเพจเราไปจากในตอนที่ 1 ของบทความนี้แล้ว ต...  

การทำตารางให้มีมุมโค้ง (แบบใช้รูปภาพ)

เรื่อง : ทำตารางให้มีมุมโค้ง (แบบดั่งเดิม/ใช้รูปภาพ) *ปัจจุบัน CSS 3 สามารถทำตารางให้มีมุมโค้งได้โดยไม่ต้องใช้ไฟล์รูปภาพมาตบแต่งครับ...  

เรียกใช้ External Stylesheet (CSS) ด้วยการ Drag & Drop

เรื่อง : เรียกใช้ไฟล์ CSS ด้วยการลากวาง โปรแกรม Dreamweaver มีความสามารถด้านการลากและวาง หรือ Drag...  

การเขียนโค้ดโปรแกรมด้วย PHP กับ Dreamweaver (PHP with Dreamweaver)

เรื่อง : PHP กับโปรแกรม Dreamweaver บทความนี้จะขอมาแนะนำการใช้งานโปรแกรม Dreamweaver กับการเขียนโปรแกรมด้วยภาษา PHP ครับ ...