วิธีการตกแต่ง Background ในเว็บไซต์ สามารถปรับแต่งรูปแบบด้วยการใช้สีหรือรูปภาพเป็น Background (พื้นหลัง) ของเว็บไซต์ได้ ซึ่งเจ้าของเว็บไซต์สามารถเลือกรูปแบบพื้นหลังที่ต้องการได้ มีขั้นตอนการปรับแต่งดังนี้
บางครั้งของการออกแบบ Web Page เราต้องการใส่รูปภาพเป็น Background หรือเป็นฉากด้านหลังของ Web Page แต่บางครั้งก็อีกที่เราต้องการ Background เพียงแค่รูปเดียวโดด ๆ ในการเป็นภาพพื้นหลัง แต่ก็จะมีปัญหาตามมา คือ เมื่อเรานำรูปที่จะนำมาเป็นพื้นหลังของเพจ รูปภาพมักจะกระทำซ้ำให้อัตโนมัติ หลายรูปจนเต็มพื้นของเว็บ เราจะมีวิธีใดในการเซ็ทให้รูปภาพแสดงแค่ภาพเดียวเป็นภาพพื้นหลังได้ อยากรู้ก็เชิญอ่านกันได้เลยครับ...
แสดงเว็บเพจที่มีรูปพื้นหลังแสดงซ้ำๆ
เทคนิคการทำให้ภาพพื้นหลังไม่แสดงซ้ำ
เปิดไฟล์เว็บเพจของเราขึ้นมา จากนั้นให้ปฏิบัติตาม ดังนี้
1. ที่ Page Properties ให้เราเลือกที่ Appearence (CSS)
(Menu -> Modify -> Page Properties)
2. ในส่วนของ Option ด้านขวามือเลือกที่ Background Image: ทำการ Browse.. เลือกรูปภาพที่ต้องการนำมาใช้เป็นพื้นหลัง
3. จากนั้นให้ทำการกำหนดค่าที่ Repeat: ดังรูป
4. ทำการคลิกที่ปุ่ม OK ของหน้าต่าง Page Properties จะพบว่ารูปภาพ Background จะไม่แสดงซ้ำเป็นหลาย ๆ รูปแล้ว
สาเหตที่รูปภาพพื้นหลังไม่แสดงซ้ำ
จากข้างต้นเมื่อเรากำหนด Option ในส่วนของ Background Image ให้เป็น no-repeat แล้ว รูปภาพจึงไม่แสดงซ้ำ นั่นเพราะว่า CSS มีความสามารถในการกำหนดการแสดงผลของพื้นหลังได้หลากหลาย และจากตรงนี้นี่เอง เราสามารถนำไปใช้ในส่วนอื่นของเว็บเพจ เช่น ที่ตาราง หากเราต้องการใช้รูปภาพนำมาเป็นพื้นหลังแล้ว ไม่ให้มีการแสดงซ้ำ ก็สามารถกระทำได้เช่นเดียวกัน โดยให้ทำการกำหนดค่า CSS ของ Background เป็น no-repeat ดังรูป
สำหรับในส่วนของการกำหนดคุณสมบัติของภาพพื้นหลังโดยใช้ CSS เรายังสามารถกำหนดการแสดงผลในรูปแบบอื่น ๆ ได้อีก เช่น ต้องการให้แสดงซ้ำตามแนวนอน (แกน x) หรือตามแนวตั้ง (แกน y) หรือต้องการกำหนดที่มีระยะแน่นอนก็สามารถกระทำได้ครับ ซึ่งฝากให้ผู้อ่านได้ทำการทดลองกำหนดค่า ศึกษากันดูด้วยตนเองต่อไป...สวัสดีครับ.
บทความอื่นที่คุณอาจสนใจ
การจัดรูปแบบหรือหน้าตาของเว็บเพจเพื่อให้ดึงดูดความสนใจแก่ผู้เข้าชมนั้น เป็นเรื่องสำคัญในการทำโฮมเพจ นอกจากการตกแต่งตัวอักษร ข้อความและการใส่รูปภาพสิ่งที่จะบ่งบอกถึงหน้าตาของเว็บเพจเรา คือ การกำหนดพื้นหลัง (Background) ให้กับเว็บเพจ ซึ่งการกำหนดพื้นหลัง สามารถกำหนดโดยใช้สี หรือรูปภาพก็ได้
ในการกำหนดพื้นหลัง สิ่งที่ต้องคำนึงอย่างยิ่ง คือ การเลือกสีพื้นหลัง กับสีของตัวอักษรหรือข้อความ ควรเป็นคู่สีที่ตัดกัน เช่น พื้นหลังกำหนดเป็นสีเข้ม สีของข้อความควรเป็นสีอ่อน หรือสีของพื้นหลังเป็นสีอ่อน สีของข้อความควรเป็นสีเข้ม ไม่ควรกำหนดให้สีกลืนกัน เพราะจะทำให้มองข้อความไม่ชัดเจน
�������Ҿ�����ѧ���Ѻ���ྨ
��ù��Ҿ�ҵ������Ҿ�����ѧ�˹�����ྨ��������������§�����˹�����ྨ ���Ҿ�����ҷ����Ҿ�����ѧ������͡�Ҿ����������������´�ҡ���Թ�����������Ѻ�����Թ� ���ͨ�����������ͤ����Ѻ�Ҿ�����ѧ���ѹ���������ö��ҹ�����Һ�˹�����ྨ��
Attribute
�����ͷ��Ժ�Ƿ�background���˹�����������Դ <body>�ٻẺ�������<body background="url">...</body>valueurl ���˹觢ͧ�ٻ�Ҿ - ���˹觷��������������䫵�
(background="image.gif") - ���˹��ٻ�Ҿ����������䫵����
(background="//www.example.com/image.gif")
������ҧ�����ҹ
<body background="bg.gif">
<h2><p align="center">�������Ҿ�����ѧ���Ѻ���ྨ</p></h2>
����ʴ���
�մ���
�������Ҿ�����ѧ���Ѻ���ྨ����� (Fixed)
��������١������Ѻ�Ҿ�����ѧ�¡���ʴ��Ҿ�����ѧ㹵��˹������ʹ �����Ҩ�����ᶺ���� (Scrollbar) �������ŧ�Ҿ�����ѧ�������������ʹ��������������ŧ��������Һ�˹�����
Attribute
�����ͷ��Ժ�Ƿ�background���˹�����������Դ <body>�ٻẺ�������<body background="url" background="fixed">...</body>value�դ������ ��� fixed ��˹����ҡ��ѧ����Ѻ���
������ҧ�����ҹ
<body background="bg.gif" background="fixed">
<h2><p align="center">�������Ҿ�����ѧ���Ѻ���ྨ�����</p></h2>
����ʴ���