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

เรื่อง : การทำรูปภาพ 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

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

Toplist

โพสต์ล่าสุด

แท็ก

แปลภาษาไทย ไทยแปลอังกฤษ โปรแกรม-แปล-ภาษา-อังกฤษ พร้อม-คำ-อ่าน lmyour แปลภาษา ห่อหมกฮวกไปฝากป้าmv แปลภาษาอาหรับ-ไทย แปลภาษาอังกฤษเป็นไทย pantip แอพแปลภาษาอาหรับเป็นไทย ค้นหา ประวัติ นามสกุล ห่อหมกฮวกไปฝากป้า หนังเต็มเรื่อง ไทยแปลอังกฤษ ประโยค Terjemahan เมอร์ซี่ อาร์สยาม ล่าสุด แปลภาษาจีน กรมส่งเสริมการปกครองท้องถิ่น ่้แปลภาษา Google Translate ข้อสอบคณิตศาสตร์ พร้อมเฉลย พร บ ระเบียบบริหารราชการแผ่นดิน ระเบียบกระทรวงการคลังว่าด้วยการจัดซื้อจัดจ้างและการบริหารพัสดุภาครัฐ พ.ศ. 2560 วิธีใช้มิเตอร์วัดไฟดิจิตอล สหกรณ์ออมทรัพย์กรมส่งเสริมการปกครอง ส่วนท้องถิ่น ห่อหมกฮวก แปลว่า Bahasa Thailand Thailand translate mu-x มือสอง รถบ้าน การวัดกระแสไฟฟ้า ด้วย แอมมิเตอร์ การ์ดแคปเตอร์ซากุระ ภาค 4 ก่อนจะนิ่งก็ต้องกลิ้งมาก่อน เนื้อเพลง ก่อนจะนิ่งก็ต้องกลิ้งมาก่อน แคปชั่น พจนานุกรมศัพท์ทหาร ภูมิอากาศ มีอะไรบ้าง สถาบันพัฒนาบุคลากรท้องถิ่น อาจารย์ ตจต อเวนเจอร์ส ทั้งหมด เขียน อาหรับ แปลไทย ใบรับรอง กรมพัฒนาฝีมือแรงงาน Google map Spirited Away 2 spirited away ดูได้ที่ไหน tor คือ จัดซื้อจัดจ้าง กินยาคุมกี่วัน ถึง ปล่อยในได้ ธาตุทองซาวด์เนื้อเพลง บช.สอท.ตำรวจไซเบอร์ ล่าสุด บบบย มิติวิญญาณมหัศจรรย์ ตอนจบ รหัสจังหวัด อําเภอ ตําบล ศัพท์ทางทหาร military words สอบ O หยน