กระทู้: รวมโค๊ดที่เกี่ยวกับพื้นหลัง BackGround Code
รวมโค๊ดที่เกี่ยวกับพื้นหลัง BackGround Code
การใส่พื้นหลังมี 2 แบบด้วยกันคือ การใส่แบบ Tile และแบบ Wallpaper
การใส่พื้นหลังแบบ Tile หรือที่เรียกว่าแบบกระเบื้อง
เป็นภาพเล็ก ๆๆ เอามาเรียงต่อกันจนเป็นภาพใหญ่ภาพพวกนี้ข้อดีคือ ไม่ว่าผู้ใช้งานเว็บจะเปิดด้วย
Browser อะไร หรือมีขนาดของหน้าจอมอร์นิเตอร์ ใช้งานอยู่มีขนาดเท่าใด ก็จะให้ภาพที่สวยเป็นระเบียบ
ใครใช้จอมอร์นิเตอร์แบบ wide screen ก็จะ มีภาพพื้นหลังเหยียดเต็ม ไม่มีช่องโหว่ จอเล็ก จอใหญ่
จะ 17" 19" ก็เหยียดเต็มพื้นที่หน้าจอทุกขนาด ดังนั้นภาพที่จะนำ url มาใช้ มักจะเป็นภาพขนาดเล็ก
มี pixel ที่เมื่อนำมาต่อกันแล้วให้ภาพเต็มที่ วางต่อ ๆ กันโดยไม่ภาพไม่ขาดตอน ไฟล์ภาพต้นฉบับจึงเล็ก
โหลดเร็ว ทำให้ไม่ต้องวางองค์ประกอบ ของภาพ คือปูเป็นพื้นหลังไปเลย ขอแค่อย่าให้สีมันลายตา
จนเปิดอ่านหัวข้อกระทู้ไม่ได้ก็พอ จะให้ดีก็เลี่ยงสีน้ำเงิน สีดำ สีเข้ม ๆ ละกันค่ะ ลูกค้ามาอ่านเว็บจะได้ดูได้ง่าย ๆ หน่อย
ใส่ bg แบบ tile
ใส่พื้นหลังฝั่งเว็บบอร์ดด้านขวา
<style>body{background-image:url(XXX);}</style>
ใส่พื้นหลังที่กรอบเมนูสีขาวฝั่งซ้าย
ถ้าต้องการใส่พื้นหลังที่กรอบเมนูสีขาวฝั่งเมนูด้านซ้าย ให้เปลี่ยนคำว่า body เป็น table แทน คือ
<style>table{background-image:url(XXX);}</style>
XXX = ให้แทนที่ด้วย URL ของภาพที่จะนำมาใช้ครับ
การใส่พื้นหลังแบบ Wallpaper (แบบรูปเดียวทั้งหน้า)
การใส่พื้นหลังแบบ Wallpaper นี้ มีข้อดีที่ ทำให้เว็บดูโดดเด่น แปลกตา แต่ขนาด pixel ของภาพที่จะนำมา
เป็นพื้นหลังก็มีส่วนสำคัญ เนื่องจากขนาดมอร์นิเตอร์มีความหลากหลาย เลือกขนาดกลาง ๆ เช่น 800x600
1024x768 หรือ บิ้กเบิ้มไวด์สกรีนอย่าง 1280x860 ก็ย่อมได้ ถ้าคุณหา url ของภาพนั้น ๆ เจอ
ภาพที่จะนำมาใช้ก็หาไม่ยากเลย แต่จะหาภาพที่มีองค์ประกอบของภาพที่เหมาะกับเว็บเรานี่จิ...
ส่วนใหญ่แม่ ๆ ใช้งานกันเป็นกระทู้ใช่ม๊า... ตัวหนังสือของกระทู้ก็จะเริ่มที่ส่วนซ้ายของฝั่งเว็บบอร์ดก่อน
สั้นหรือยาวก็ตามแต่ชื่อหัวข้อกระทู้นั้น ๆ การใส่ภาพพื้นหลังให้คำนึงถึงองค์ประกอบของเว็บด้วย
การเลือกภาพนอกจากจะเป็นตัวการ์ตูน หรือภาพที่เจ้าของบ้านชอบแล้ว สีก็ไม่ควรทำให้กลืนไปกับ
หัวข้อกระทู้ หรือห้องอื่น ๆ ที่เราสร้างองค์ประกอบเอาไว้ จะเป็นภาพดุ๊กดิ๊ก หรือภาพนิ่ง ก็ตามชอบ
ลองใส่โค๊ตแล้ว ให้ refresh ที่หน้าบ้าน แล้วลองเข้าใช้งานเมนูอื่น ๆ เช็คดูด้วยนะครับ
ใส่ bg เป็นรูปภาพเดียวทั้งหน้า แบบ wallpaper
<style>Body{background-image:url(XXX);background-position: center;background-repeat: no-repeat;background-attachment: fixed;background-color: color code;}</style>
หรือต้องการใส่ bg เป็นภาพเดี่ยว ภาพเดียวที่พื้นหลังสีขาวของกรอบเมนูฝั่งซ้าย ก็เปลี่ยนคำสั่งจาก body เป็น table แทน
<style>table{background-image:url(XXX);background-position: center;background-repeat: no-repeat;background-attachment: fixed;background-color: color code;}</style>
###### เปลี่ยนค่าตามนี้เลยน๊า ######
XXX = ให้แทนที่ด้วย URL ของภาพที่จะนำมาใช้
แต่ละ Attributes เราก็เลือกค่า Value ที่เราต้องการ แทนที่ลงไป
background-position: กำหนดการจัดวางตำแหน่งของภาพ
เลือก Value แทนที่ สีน้ำเงิน ตามค่าที่ต้องการดังนี้
center; อยู่ตรงกลางหน้าจอ
left; ชิดซ้ายกลาง
left top; ชิดมุมบนซ้าย
left bottom; ชิดซ้ายล่าง
right; ชิดขวากลาง
right top; ชิดมุมบนขวา
right bottom; ชิดขวาล่าง
bottom; ชิดขอบล่าง
background-repeat: กำหนดให้แสดงภาพซ้ำ
เลือก Value แทนที่สีน้ำเงิน ตามค่าที่ต้องการดังนี้
no-repeat; สั่งให้ไม่แสดงภาพซ้ำ
repeat-x; ซ้ำภาพในแนวนอน
repeat-y; ซ้ำภาพในแนวตั้ง
background-attachment: กำหนดให้ภาพยึดติดอยู่กับที่
เลือก Value แทนที่สีน้ำเงิน ตามค่าที่ต้องการดังนี้
fixed; เมื่อมีการเลื่อน Scroll Bar ภาพพื้นหลังจะไม่เลื่อนตาม
scroll; ภาพจะเลื่อนขึ้นลงตาม Scroll Bar
background-color: คุณสมบัติกำหนดสีพื้นหลัง
เลือก Value แทนที่สีส้ม ด้วยค่าของสีที่ต้องการดังนี้
ใส่ชื่อสี เช่น white; black; blue; red;
กำหนดเป็นโค๊ตสีแบบเลขฐานสิบหก เช่น #0000ff
ดูโค๊ตสีได้ที่โปรไฟล์ของแต่ละคน ในเมนู ตกแต่งโปรไฟล์
ใส่ bg โดยใช้สี
<style>body{background: color code}></style>
ดูโค๊ตสีได้ที่โปรไฟล์ของแต่ละคน ในเมนู ตกแต่งโปรไฟล์
ใส่ bg โดยไล่เฉดสี (gradient)
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=' color code 1', startColorstr=' color code 2', gradienttype=0);">
color code1 = สีที่ 1 เช่น #FFFFCC สีเหลืออ่อน
color code2 = สีที่ 2 เช่น #FFCCFF สีชมพูอ่อน
gradienttype 0 ไล่สีตามแนวนอน
gradienttype 1 ไล่สีตามแนวตั้ง
แหล่งแจก bg สวย ๆ พร้อมโค๊ตสำเร็จรูป
http://myglitterspace.com/GsBg/backgrounds.php
โพสต์โดยponeag
8 เม.ย. 55 เวลา 13:21 947