mamynongguy  >>  

----- Code เกี่ยวกับพื้นหลัง / BG -----
   การเปลี่ยนพื้นหลัง BG


Background : การทำพื้นหลังของกรอบเมนู และเว็บบอร์ด

เริ่มจากการเปลี่ยนพื้นหลังกันก่อนนะคะ ใคร ๆ ก็คงจะอยากเปลี่ยนบ้านขาว ๆ ให้มีสีสันกันมั่งเน๊อะ
การใส่พื้นหลังมี 2 แบบด้วยกันคือ การใส่แบบ Tile และแบบ Wallpaper

การใส่พื้นหลังแบบ Tile หรือที่เรียกว่าแบบกระเบื้อง
เป็นภาพเล็ก ๆๆ เอามาเรียงต่อกันจนเป็นภาพใหญ่ภาพพวกนี้ข้อดีคือ ไม่ว่าผู้ใช้งานเว็บจะเปิดด้วย
Browser อะไร หรือมีขนาดของหน้าจอมอร์นิเตอร์ ใช้งานอยู่มีขนาดเท่าใด ก็จะให้ภาพที่สวยเป็นระเบียบ
ใครใช้จอมอร์นิเตอร์แบบ wide screen ก็จะ มีภาพพื้นหลังเหยียดเต็ม ไม่มีช่องโหว่ จอเล็ก จอใหญ่
จะ 17" 19" ก็เหยียดเต็มพื้นที่หน้าจอทุกขนาด ดังนั้นภาพที่จะนำ url มาใช้ มักจะเป็นภาพขนาดเล็ก
มี pixel ที่เมื่อนำมาต่อกันแล้วให้ภาพเต็มที่ วางต่อ ๆ กันโดยไม่ภาพไม่ขาดตอน ไฟล์ภาพต้นฉบับจึงเล็ก
โหลดเร็ว ทำให้ไม่ต้องวางองค์ประกอบ ของภาพ คือปูเป็นพื้นหลังไปเลย ขอแค่อย่าให้สีมันลายตา
จนเปิดอ่านหัวข้อกระทู้ไม่ได้ก็พอ จะให้ดีก็เลี่ยงสีน้ำเงิน สีดำ สีเข้ม ๆ ละกันค่ะ ลูกค้ามาอ่านเว็บจะได้ดูได้ง่าย ๆ หน่อย

การใส่พื้นหลังแบบ Wallpaper (แบบรูปเดียวทั้งหน้า)
การใส่พื้นหลังแบบ Wallpaper นี้ มีข้อดีที่ ทำให้เว็บดูโดดเด่น แปลกตา แต่ขนาด pixel ของภาพที่จะนำมา
เป็นพื้นหลังก็มีส่วนสำคัญ เนื่องจากขนาดมอร์นิเตอร์มีความหลากหลาย เลือกขนาดกลาง ๆ เช่น 800x600
1024x768 หรือ บิ้กเบิ้มไวด์สกรีนอย่าง 1280x860 ก็ย่อมได้ค่ะ ถ้าคุณหา url ของภาพนั้น ๆ เจอ
ภาพที่จะนำมาใช้ก็หาไม่ยากเลย แต่จะหาภาพที่มีองค์ประกอบของภาพที่เหมาะกับเว็บเรานี่จิ...
ส่วนใหญ่แม่ ๆ ใช้งานกันเป็นกระทู้ใช่ม๊า... ตัวหนังสือของกระทู้ก็จะเริ่มที่ส่วนซ้ายของฝั่งเว็บบอร์ดก่อน
สั้นหรือยาวก็ตามแต่ชื่อหัวข้อกระทู้นั้น ๆ การใส่ภาพพื้นหลังให้คำนึงถึงองค์ประกอบของเว็บด้วย
การเลือกภาพนอกจากจะเป็นตัวการ์ตูน หรือภาพที่เจ้าของบ้านชอบแล้ว สีก็ไม่ควรทำให้กลืนไปกับ
หัวข้อกระทู้ หรือห้องอื่น ๆ ที่เราสร้างองค์ประกอบเอาไว้ จะเป็นภาพดุ๊กดิ๊ก หรือภาพนิ่ง ก็ตามชอบ
ลองใส่โค๊ตแล้ว ให้ refresh ที่หน้าบ้าน แล้วลองเข้าใช้งานเมนูอื่น ๆ เช็คดูด้วยนะคะ
โดย: เจ้าบ้าน [11 มี.ค. 52 2:49] ( IP A:58.9.151.146 X: )
Add to Facebook  Add to Twitter  Add to Multiply  Add to Google  Add to Blogger  Add to Live

ความคิดเห็นที่ 1
   Code การใส่พื้นหลัง

1. ใส่ bg แบบ tile

ใส่พื้นหลังฝั่งเว็บบอร์ดด้านขวา
<style>body{background-image:url(XXX);}</style>

ใส่พื้นหลังที่กรอบเมนูสีขาวฝั่งซ้าย
ถ้าต้องการใส่พื้นหลังที่กรอบเมนูสีขาวฝั่งเมนูด้านซ้าย ให้เปลี่ยนคำว่า body เป็น table แทน คือ
<style>table{background-image:url(XXX);}</style>



2. ใส่ bg แบบ tile ให้เต็มฝั่งซ้าย (เอาพื้นที่เขียว ๆ ออกให้หมด)

ก่อนใส่ bg เราก็ต้องใส่คำสั่งโค๊ตให้ลบสีพื้นหลังสีเขียว ๆ ด้านซ้ายออกซะก่อน
แล้วค่อยใส่โค๊ตพื้นหลังตาราง ตามนี้ค่ะ
<style>table{background:none;} td {background:none;}</style>
<style>table{background-image:url(XXX);}</style>

จะเห็นว่าภาพจะแทนที่พื้นที่ส่วน head เขียว ๆ ข้างบน แล้วก็พื้นหลังสีเขียวของฝั่งเมนูด้านซ้ายด้วย
ถ้าไม่ใส่คำสั่งลบพื้นหลังสีเขียวออกก่อน ก็จะใส่พื้นหลังแค่กรอบสีขาว ๆ เท่านั้นค่ะ อันนี้ก็ดูง่ายดีค่ะ สะอาดตา



3. ใส่ 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
ดูโค๊ตสีได้ที่ http://www.zalim-code.com/codeconlor.htm
โดย: เจ้าบ้าน [11 มี.ค. 52 2:50] ( IP A:58.9.151.146 X: )

ความคิดเห็นที่ 2
   4. ใส่ bg โดยใช้สี

<style>body{background: color code}></style>

code สีดูที่นี่ค่ะ
http://www.zalim-code.com/codeconlor.htm
http://www.khonkaenlink.info/serviceprogram/Webmaster_ColorChart.htm
http://my.dek-d.com/Writer/story/viewlongc.php?id=250446&chapter=188



5. ใส่ 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 / Wallpaper :::::::::::::::::::::::::
http://www.zalim-code.com/display.htm แจก bg สีพื้นแบบ Tile ไปก๊อป url มาใส่กันเลยจ๊ะ
http://www.zalim-code.com/wallpaper/kitty1.html แจก wallpaper Kitty ล้วน ๆ
http://background.myem0.com แจกโค๊ตสำเร็จ bg
http://www.dollielove.com แหล่งแจก bg สวย ๆ พร้อมโค๊ตสำเร็จรูป
http://myglitterspace.com/GsBg/backgrounds.php แหล่งแจก bg สวย ๆ พร้อมโค๊ตสำเร็จรูป

โดย: เจ้าบ้าน [11 มี.ค. 52 2:50] ( IP A:58.9.151.146 X: )


คลิกที่นี่เพื่อกลับหน้าบ้าน