การกำหนดพื้นหลังเว็บเพจให้เป็นรูปภาพใช้คำสั่งในข้อใด

Question

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

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

สารบัญ Show

เรื่อง : การทำรูปภาพ Background ไม่ให้กระทำซ้ำ (Background No Repeat)
เทคนิคการทำให้ภาพพื้นหลังไม่แสดงซ้ำ
สาเหตที่รูปภาพพื้นหลังไม่แสดงซ้ำ
บทความอื่นที่คุณอาจสนใจ

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

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

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

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

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 :

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

CSS Backgrounds กำหนดพื้นหลังด้วย Css เป็นการจัดหน้าตาหรือรูปแบบของเว็บเพจเพื่อให้ดึงดูดความสนใจให้แก่ผู้ชื่นชมเป็นเรื่องที่สำคัญมากในการสร้างเว็บเพจนอกจากมีการตกแต่งตัวอักษรข้อความและสามารถเพิ่มการใส่รูปภาพของเว็บเพจ ในการกำหนดพื้นหลังให้กับเว็บเพจสามารถใช้รูปภาพหรือการใช้สีได้ โดยสามารถกำหนดสีข้อความได้ ถ้าหากพื้นหลังเป็นสีเข้มให้ข้อความเป็นสีอ่อน แต่ถ้าหากพื้นหลังเป็นที่อ่อน ก็ให้ข้อความเป็นสีเข้มได้ ซึ่งการใส่พื้นหลังรูปภาพหรือการใส่สี สามารถกำหนดตำแหน่งพื้นหลังได้

กำหนดคำสั่ง Background
- Background-coler กำหนดสีของพื้นหลัง
- background-image กำหนดรูปมาใช้เป็นพื้นหลัง
- background-repeat กำหนดคำสั่งจะคู่กับ background-image เพื่อจะสั่งให้พื้นหลังนำรูปมาใช้ซ้ำ
- background-attachment กำหนดคำสั่งก็สามารถใช้กับ background-image ได้เช่นเดียวกัน เพื่อกำหนดรูปให้อยู่กับที่หรือเคลื่อนตาม
- background-position คำสั่งนี้สามารถใช้กับ background-image ได้เช่นเดียวกันโดยเป็นการกำหนดตำแหน่งเริ่มต้นที่รูปนี้จะไปอยู่
- background-size การกำหนดขนาดพื้นหลัง

<html>
<p style="background-color:#FF0000;">พื้นหลังสีแดง</p>
<p style="background-color:rgb(0,0,255);">พื้นหลังสีน้ำเงิน</p>
<p style="background-color:yellow">พื้นหลังสีเหลือง</p>
</html>

ผลลัพท์การใช้คำสั่ง background-color กำหนดสีให้กับพื้นหลัง

ในการกำหนดรูปแบบพื้นหลังด้วย css เพื่อให้เว็บเพจมีสันมีความน่าสนใจ ในการเขียนโปแกรมเว็บไซต์ต้องมีการออกแบบเว็บไซต์ให้สวยงาม การจัดสัดส่วน layout ของเว็บเพจ สามารถใช้กำหนส่วนต่าง ๆของเว็บไซต์ได้อีกด้วย ในการออกแบบ CSS เป็นภาษา Style Sheets โดย Style Sheets ชุดเดียวสามารถใช้กำหนดรูปแบบการแสดงผลให้เอกสาร HTML ทั้งหน้า หรือทุกหน้ามีผลเหมือนกันได้ จึงทำให้เวลาที่มีการแก้ไขก็จะแก้ไขได้ง่ายขึ้นเพียงแก้ไข Style Sheets ที่ใช้งานเพียงชุดเดียวเท่านั้น ทำให้เว็บไซต์มีมาตราฐานเพราะการใช้งาน CSS นั้นจะทำให้การแสดงผลในสื่อต่าง ๆ ถูกปรับเปลี่ยนไปได้อย่างเหมาะสม เช่น การแสดงผลบนหน้าจอ

อ้างอิง
CSS พื้นหลัง.[ออนไลน์].เข้าถึงได้จาก https://zakoschool.herokuapp.com/lesson/css/background
[CSS] วิธีใช้ background เบื้องต้น.[ออนไลน์].เข้าถึงได้จากhttps://rabbitinblack.com/2011/12/css-background/
CSS Backgrounds กำหนดพื้นหลังด้วย CSS.[ออนไลน์].เข้าถึงได้จากhttps://www.dcrub.com/css-backgrounds

ข้อใดเป็นคำสั่งแท็ก tag ในการกำหนดรูปภาพเป็นเพื้นหลังเว็บ