การเปลี่ยน background ด้วย CSS (แจก BG สีชมพูค่ะ)

posted on 08 Feb 2007 21:43 by jennessa in Design

สวัสดีค่ะ วันนี้มาดูกันว่า เราสามารถทำอะไรกับ background ของบลอคเราได้บ้าง หลายคนคงทำได้แล้ว ก็เลื่อนลงไปเอา background สีชมพูรับวาเลนไทน์ข้างล่างได้เลยค่ะ (^o^)

เริ่มเลยนะ

1. ไปที่ Theme --> แก้ CSS ด้วยตัวเอง

2. หาคำว่า .site ค่ะ อันนี้คือส่วนที่จะกำหนดลักษณะของหน้าเวบทั้งหน้า ดังข้างล่างค่ะ

.site{
margin:10px;
padding:0px;
text-align:center;
background-color: #FFFFFF;
background-image:url(http://jennessa.exteen.com/images/bg/bg1.gif);
background-repeat:repeat
background-position:center;
}

มาดูตัวที่เกี่ยวกับ background กันค่ะ

- background-color: กำหนดสีของ background ค่ะ สามารถใส่ค่าได้หลายแบบ แต่ที่ใช้กันส่วนใหญ่จะเป็นรหัสสีแบบ hex ซึ่งเป็นเครื่องหมาย # ตามด้วยเลขฐานสิบหกอีกหกตัว (อ่า ถ้างงไม่เป็นไรนะคะ) ดูสีและรหัสได้ที่นี่ค่ะ Click

ตัวอย่างการใช้หลาย ๆ แบบ

background-color: red; /* ใส่ชื่อสีได้เลยค่ะ */
background-color: #00FFFF; /* ใส่เป็น hex-code */
background-color: rgb(250, 250, 250); /* ใส่เป็น rgb-code */

- background-image: url(<ใส่ url ของรูป>) กำหนดให้ใช้ภาพเป็น background โดยต้องมี url ของภาพก่อนนะคะ

ตัวอย่างการใช้

background-image:url(http://jennessa.exteen.com/images/bg/bg1.gif);

- background-repeat: กำหนดว่าจะให้รูปที่นำมาทำเป็น background เรียงต่อกันซ้ำ ๆ ไปในทิศทางใด ค่าที่ใส่ได้มีดังต่อไปนี้ค่ะ

repeat อันนี้เป็นค่า default ค่ะ รูป background จะเรียงต่อกันซ้ำ ๆ ไปทั้งแนวตั้งและแนวนอน
repeat-x รูป background จะเรียงต่อกันซ้ำ ๆ ไปในแนวนอน
repeat-y รูป background จะเรียงต่อกันซ้ำ ๆ ไปในแนวตั้ง
no-repeat รูป background จะไม่มีการเรียงต่อกัน จะอยู่เป็นรูปเดียวบนพื้นหลังเลยค่ะ

- background-position: x y กำหนดจุดเริ่มต้นของรูป background ว่าจะให้อยู่ตำแหน่งใดของหน้าจอ x คือตำแหน่งในแนวนอน y คือตำแหน่งในแนวตั้ง ถ้าใส่แค่ 1 ตำแหน่ง เช่น ใส่ center อย่างเดียว ตัวที่สองจะเป็น center โดยอัตโนมัติค่ะ

ตัวอย่างการใช้

background-position: top left /* รูป background เริ่มที่มุมบนซ้าย */
background-position: center /* รูป background เริ่มที่ตรงกลางของทั้งแนวตั้งและแนวนอน */
background-position: 20px 30px /* กำหนดระยะห่างจากขอบบนและขอบซ้ายเป็น pixel */

- background-attachment: กำหนดให้ background อยู่กับที่หรือเลื่อนไปตาม scroll bar สามารถใส่ได้สองค่าค่ะ ได้แก่

fixed รูป background อยู่กับที่
scroll รูป background เลื่อนไปตาม scroll bar

มีข้อแนะนำนิดนึงว่า ควรจะกำหนด background-color ไว้ทุกครั้ง เผื่อไว้ในกรณีที่รูป background มันหายไป บลอคเราจะได้มีสีพื้นรองไว้ก่อนค่ะ

ลองเซฟ background ไปลองทำดูได้เลยค่ะ ลองเอาเมาส์ชี้บน background ที่ต้องการ เพื่อดูว่าตอนมัน repeat ต่อ ๆ กันแล้วจะออกมาเป็นยังไง ต้องการรูปไหนก็คลิกขวา แล้วเลือก Save Picture As... ได้เลยค่า

ปล. บลอคนี้เป็นการทดลองใช้ JavaScript ใน Exteen ด้วย ถ้าเพื่อน ๆ เจอ error อะไรก็คอมเมนต์ไว้ได้เลยนะคะ เอาไว้จะมาลงวิธีทำให้เมาส์ชี้แล้วเปลี่ยน background แบบนี้ให้ได้ไปลองกันค่ะ

ขอบคุณ bg น่ารัก ๆ จาก www.mooann.net ค่ะ

Tags: background, bg, css, material, pink88 Comments

ว้าว~! น่ารักดีจัง เอาเมาส์ไปชี้แล้วเปลี่ยน bg ได้ด้วย โอ้ว OoO

#1 By maebin on 2007-02-08 21:47

ขอบคุณสำหรับแบล็คกราวนะค้า

#2 By *~นักสืบคิด~* on 2007-02-08 21:47

กรี๊ดๆๆขอบคุณมากๆเลยนะคะ ที่มาบอกกัน เพราะตอนนี้กะลังหาวิธิแก้อยู่พอดี ขอบคุณจริงๆนะคะ (ปลื้ม~~)

งั้นขอadd favouriteนะคะ

#3 By Eámanë of Shadowless on 2007-02-08 21:49

ชอบมั่กๆๆ

ขอบคุณครับ

#4 By (¯`•¸®·neo590·) °´¯)* on 2007-02-08 21:50

มีของน่ารักมาฝากอีกแล้ว
ขอหอมฟอดใหญ่ๆขอบคุณมากนะคะ

#5 By eeddy(อี๊ด) on 2007-02-08 22:04

ดีใจที่ทุกคนชอบ

add favourite ได้เลยค่า ด้วยความยินดี

มีคำถาม ทำไม่ได้ ติดตรงไหน คอมเมนต์ถามไว้ได้นะคะ

#6 By เจนเนสซ่า on 2007-02-08 22:06

โอ้

วีธีแต่งบลอคเยอะแยะเลย

แล้วจะลองทำตามดูนะคะ

#7 By Aerial : find sth. on 2007-02-08 22:07

เย้ๆ ทริปมากมาย มากมาย มากม๊ายยย

ขอบคุณหลายๆ อิอิ

#8 By worapoj@~@ on 2007-02-08 22:08

background น่าร้ากกกกก

#9 By ลอท on 2007-02-08 22:42

กำลังหาวิธีทำอยู่พอดีเลยคับ
ขอบคุณอย่างสุดซึ้ง

#10 By Boobyboil on 2007-02-08 23:05

ขอบคุณมากๆค่า ~ ^^

#11 By > Hanabusa on 2007-02-08 23:12

อย่างที่เธอบอกจริงๆด้วย ว่า css ทำอะไรได้มากกว่าที่เรารู้ (เยอะมั๊กๆ)

ปล. ลายชมพูมาเชียวนะ บอกแล้วไงว่าเราชอบสีเขียวววว

#12 By naruto (58.9.187.22) on 2007-02-08 23:29

ว้าว บทความดี ๆ อีกละ ขอบคุณนะครับ

#13 By เจ้าชายน้อย on 2007-02-09 08:22

โอ เพิ่งมาเจอเว็บแนะนำเทคนิค ขอแอดไว้เลยละกันนะครับ เผื่อจะปรับปรุง blog
ของตัวเองให้งามๆบ้าง เห่ยมาเป็นปีแล้ว

#14 By Yimp on 2007-02-09 22:00

มาเม้นให้นะคะ เจน
ไม่ได้เจนนี่ตอนแรกๆเราคงแย่ แต่ตอนนี้เราพอมีโค้ดบ้างแล้วนะคะ
ถ้าเจนไม่รังเกียจ ลองไดๆบ้างก็ได้ค่ะ แลกเลปี่ยนกัน
ดูดแต่ของเจนนานเยย
แหะๆ

#15 By Amilin on 2007-02-09 22:22

ขอบคุณฮับ

#16 By karaveak on 2007-02-09 22:52

ว้าววววๆๆๆๆๆ
ขอบคุณมากๆเลยค่ะ
เด๋วต้องลองไปทำบ้างแล้ว
ขอบคุณที่แวะไปเยี่ยมบลอคนะคะ

#17 By puppy on 2007-02-10 09:30

มีประโยชน์มากคับ ขอบคุนมากๆเลย
เราก็กำลังหัดทำอยุ่พอดีเลย
ขอแอดนะคับผม

#18 By ~*~Sakura Kaze~*~ on 2007-02-11 00:17

เราไม่กล้าใช้cssเลยอ่ะเคยทำให้มานแบบว่าเน่าๆมาครั้งหนึ่ง
ไม่อ้าวดีกว่าใช้แบบเดิมก้พอแล้ว
ไว้พร้อมจริงๆค่อยเปลี่ยนดีกว่า

ขอบคุณนะคะที่เอามาลงให้

อย่างน้อยก้แก้ความโง่เขลาของเราได้เยอะอยุ่

#19 By cha_o_chan on 2007-02-11 17:10

ขอ BG นะคะ
ขอบคุณค่ะ
เจเนส น่ารักที่ซู๊ดด

#20 By Gigzaa on 2007-02-13 09:57

ขอบคุณนะคะ *-*
ขอ BG นะคะ
เจเนสซ่า น่ารักที่ซู๊ดดด

#21 By Gigzaa on 2007-02-13 10:00

ขออนุญาติมาส่ง desktop tag นะครับ ช่วยไปรับที่ blog ด้วยนะครับ

ติดตามผลงานดีดีของคุณ jennessa มาตลอดเลยคับ blog ผมดูดีขึ้นเพราะคุณจริงๆ ขอบคุณครับ

#22 By zzzluciferzzz on 2007-02-19 23:50

ขอบคุณมากนะฮะ เป็นประโยชน์มากมาย>[]<
ขอแอดบลอคนะฮะ

#23 By ~=Rayrina=~ on 2007-02-22 20:39

แวะมาอ่านค่า ขอบคุนด้วยนะคะที่มีคำแนะนำดีๆไว้ให้ค่ะ

#24 By ก้อนหินกับดวงดาว on 2007-02-27 13:30

ขอบคุณมากๆสำหรับเทคนิคต่างๆฮะ
กำลังหาวิธีทำให้ bg มันฟิกซ์อยู่กับที่
พอดีเลย...ไม่ชอบให้มันเลื่อนๆ หรือ
รีพีทซ้ำๆ ไม่สวย ไม่โดนใจ...
สำหรับเทคนิคอื่นๆก็จะค่อยๆลองเล่นดูฮะ...ขอบคุณจริงๆ

#25 By ♪ ZEASonal on 2007-02-28 14:42

ขออณุญาตมาเก็บเกี่ยวความรู้อีกรอบนึงครับ

#26 By jojo.user on 2007-03-03 22:10

พี่คะขอบคุนนะคะที่จะช่วยในการเปลี่ยนธีมอ่า แต่ก้อเปลี่ยนไม่ได้อยู่ดีทำตามที่พี่บอกในหัวข้อนี้แล้วอะคะ สีที่ออกมามันก้อประหลาดไม่เหมือนที่เราเลือกเลยอะคะ ช่วยด้วยนะคะ

#27 By babie_moon on 2007-03-05 18:44

พี่คะพี่เหนสีชมพูของหนูมันอยู่ตรงไหนอะคะ คือว่าหนูยังเหนเป็นสีส้มอยู่เลยอะคะ

#28 By babie_moon on 2007-03-05 20:20

พี่เจนคะคือว่าหนูเปลี่ยนรูปตงแบคกราวอะคะมันไม่เหนขึ้นเลยมันเกี่ยวกับต้องอัพรูปให้เป็น url ของเวป exteen รึเป่าคะทำไมมันไม่ขึ้นอะคะ

#29 By babie_moon on 2007-03-06 18:52

พี่เจนคะหนูเขียนอย่างงี้ถูกมั้ยคะ
.site{
margin:10px;
padding:0px;
text-align:center;
background-color: #FF99CC;
background-image:url
(http://babie-moon.exteen.com/images/117290954688212800.jpg);
background-repeat:repeat-y;
background-position:center;

#30 By babie_moon on 2007-03-06 21:27

ตื่นตาตื่นใจมากกับเทคนิคเอาเมาส์ไปชี้แล้วเปลี่ยน bg ได้เนี่ยค่ะ
ขออนุญาตเซฟไปหมดเลยนะคะ แต่ละรูปน่ารักๆทั้งนั้นเลย

#31 By หว่อเต๋ออ้าย on 2007-03-11 17:49

น่ารักจังเลยขอเอาไปใช้นะคะ
ขอบคุณค่า~~~

#32 By .::✥ⓚaewwiⓔ✥::. on 2007-03-26 14:11

ขอบคุณสำหรับความรู้นะครับ

#33 By วัชระ on 2007-04-18 01:26

BG น่ารัก...

#35 By Blog's Chocola-Creamy on 2007-04-21 12:09

น่ารักจัง มีประโยชน์มากกกกก สำหรับมืใหม่อย่างเรา
.............ขอบคุณนะก๊าบ

#36 By ~**สวัสดีความสุข**~ on 2007-04-21 18:38

ขอบคุณคะจะลองไปมำดูนะคะ

#37 By DhNeSwXiah on 2007-05-09 13:46

ได้เพิ่มมาอีกอันแล้วblogเรา ขอบคุณครับ

#39 By ปลาน้อย on 2007-06-09 22:54

ขอเอาเเบ็คกราวสีชมพูไปใช้นะคะ ^ ^

ขอบคุณคะ

#40 By ::~*☆MonNieS☆*~ -DEV@LINAL:: on 2007-06-27 23:25

แง้ ทำไมผมทำไม่ได้เลยอะ ทั้งที่ทำตามแล้วแท้ๆ รูป BG มันไม่ยอมขึ้นเลยอะครับ

#41 By VinCentKung on 2007-07-20 13:33

ฮื่อๆๆๆเปลี่ยนแล้วแล้วมันก็ไม่เป็นอย่างที่คิด แล้วทำให้กลับเหมือนเดิมก็ไม่ได้ทำไงดีอะ พอดีเปลี่ยนbackground colorอะแล้วมันไม่มีสีทำให้เห็นแต่รูปข้างหลังอะ ตัวหนังสือก็เลยไม่ชัด ช่วยหน่อย น้า~~~~~ขอคุณฮับบบบบบบ

#42 By poo on 2007-09-07 19:38

thx a lot ne

#43 By Rhizopus ❤ on 2007-09-11 01:47

poo คะ ถ้าจะใช้ background เป็นสีพื้น ก็ต้องเอา background-image ออกก่อนนะคะ ถึงจะเห็นสีพื้น ไม่งั้น background-image มันจะทับสีพื้นไปเลย ทำให้มองไม่เห็นจ้ะ

#44 By เจนเนสซ่า on 2007-09-11 09:51

เก่งจัง อยากทำได้แบบคุณมัง ค่ะ

#45 By on 2007-09-23 18:00

ขอบคุณคับ กำลังงงๆอยู่เลย ว่าจะจัดการกับบล๊อคตัวเองยังไงดี แฮะๆ ^^

#46 By ฟ่าง on 2007-09-24 19:21

ขอบคุณนะคะ นางฟ้าใจดี กิกิ big smile

#47 By *~ mimmer ~* on 2007-10-14 20:16

ขออนุญาตแอดนะค่ะ ให้ความรู้มากมาย

#48 By Teddyyor on 2007-12-02 15:26

ขอโทษนะครับ เพิ่งมาถามเอาป่านนี้

แต่ว่าถ้าผมอยากจะทำพื้นของส่วน entry ให้มันโปร่งใสเห็นแบรคกราวด์ข้างหลัง แต่อ่อนกว่าเพราะโดนพื้น Entry ทับจนรูปข้างหลังมันไม่ตีกับเนื้อหาใน Entry

ผมต้องทำยังไงเหรอครับ ลองมาเยอะแล้วแต่ก็ทำไม่ได้สักทีอ่ะครับ

#49 By imome on 2008-01-14 03:13

I'll try to figure it out and will let you know na ka surprised smile

#50 By เจนเนสซ่า on 2008-01-14 18:40

ผมหา site ไม่เจออ่ะคับ -*-
ก็เลยcopyไปลง
แต่พอลงBGแล้วมันมีแต่ข้างบนอ่ะคับ
ตรง repeat ก็ใช้มะได้อ่ะคับ
ประมาณว่ามีแต่แถวบนแถวเดียวเลย
พอทดลอง no-repeat มันก็เหมือนเดิมอ่ะคับ
เหมือนไม่มีอะไรเกิดขึ้น..ทำไงดีอ่า

#51 By Lufie on 2008-01-18 17:18

เอนทรีนี้ใช้ได้กับ Exteen version เก่านะคะ ถ้าเป็น Theme แบบใหม่จะใช้ไม่ได้ค่ะ sad smile

#52 By เจนเนสซ่า on 2008-01-18 17:48

Jennessa's Blog: แต่งบลอคง่าย ๆ ด้วยตัวคุณเอง

Pages