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

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

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 3 (จบ)

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 3 (จบ) กลับมาต่อกันอีกสักตอนสำหรับเรื่องของการใช้งานโป...  

Upload ไฟล์เว็บไปไว้บน Web Hosting ด้วย Dreamweaver

เรื่อง : Dreamweaver กับการ Upload ไฟล์เว็บไซต์ไปยัง Web Hosting เมื่อเร็ว ๆ นี้มีน้องคนหนึ่งโทรเข้ามาสอบถามเรื่องของการใช้...  

การสร้างโปรแกรมสำหรับการค้นหา (Search) ข้อมูลจาก Database

เรื่อง : การสร้างโปรแกรมสำหรับการค้นหา (Search) ข้อมูลจาก Database บทความนี้คงถูกอกถูกใจของใครหลายคนเป็นแน่ เ...  

เปิดเส้น Grid เพื่อช่วยในการออกแบบเว็บเพจ (Enable Grid)

เรื่อง : เปิดเส้น Grid เพื่อช่วยการออกแบบเว็บเพจ (How to enable Grid view in Dreamweaver) Grid คือ ตาราง ซึ่งผู้ใช้งานโป...