ใส่ลูกเล่นให้ background เรียบ ๆ ด้วย CSS

posted on 12 May 2007 20:04 by jennessa in Design

สวัสดีค่ะ ก่อนอื่น ต้องขอบคุณคอมเมนต์จากเอนทรีที่แล้วนะคะ ได้ความเห็นหลาย ๆแบบ จะนำไปปรับปรุงต่อไปค่ะ ตอนนี้เจนเนสซ่าก็วาดมาใหม่อีกรูปนึงแล้ว แหะ แหะ (^^)" แต่เก็บไว้ก่อนละกัน

เห็นกระถางน้อยตรงมุมขวาล่างของบลอคมั้ยคะ ? จะเห็นว่าเวลา scroll หน้าเวบลงมา กระถางต้นไม้จะอยู่กับที่ จริง ๆ แล้วเป็นการนำ background สีกับ background อยู่กับที่มาใช้ร่วมกันค่ะ มาดูวิธีทำกันค่ะ

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

2. หาคำว่า .site ค่ะ เพิ่มโค้ดข้างล่างลงไปใน .site ค่ะ

background: #fff9fb url(http://jennessa.exteen.com/images/akami.gif) no-repeat fixed right bottom;

หมายความว่า

background: [สีพื้น] [url ของรูปที่จะนำมาทำอยู่กับที่] [กำหนดให้ใช้รูปเดียว] [กำหนดให้รูปอยู่กับที่] [กำหนดให้รูปอยู่ทางขวา] [กำหนดให้รูปอยู่ล่างสุดของหน้าเวบ]

โค้ดนี้เป็นการใช้คำสั่งกำหนด background ในรูปแบบสั้นค่ะ คือรวมหลาย ๆ ค่าไว้ด้วยกัน

3. ตรง right bottom สองค่าหลังเป็นการกำหนดตำแหน่งของรูปนะคะ สามารถกำหนดได้หลายค่า ดังนี้ค่ะ

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y% ถ้าใส่เป็น 0% 0% คือ top left ค่ะ ถ้าใส่ 100% 100% คือ right bottom
xpos ypos เป็นการกำหนดตำแหน่งของรูปได้เลยค่ะ เช่น 15px 20px

4. เมื่อเลือกตำแหน่งที่ต้องการให้รูปแสดงได้แล้วก็ Save ได้เลยค่ะ

เทคนิคนี้อาจจะนำมาใช้ในการทำ background สีเรียบ ๆ ให้ดูน่าสนใจ หรือเอาไว้ใช้ประกาศข่าว หรือใส่รูปตามเทศกาลต่าง ๆ เช่น วันวาเลนไทน์ ก็เอารูปหัวใจโต ๆ มาใส่ไว้ หรือวันเกิด ก็เอาเค้กมาไว้บนหน้าจอ เก๋ไปอีกแบบ ลองนำไปใช้ได้หลายแบบค่ะ ถ้าทำไม่ได้ ติดปัญหาอะไร ก็ทิ้งคำถามไว้นะคะ (^^)V

Tags: background, color background, css, design, fixed, theme44 Comments

ดูหวาน เรียบร้อยดีแหละ

#1 By MemieTa on 2007-05-12 20:14

อืมมม..... คงต้องเอาไปลองทำดูซะแล้ว อิอิ

ขอบคุณมากนะคะ

#2 By + MaeBin + on 2007-05-12 20:18

ขอบคุณค่ะ

#3 By ท้องฟ้าของฉัน on 2007-05-12 20:25

อ่าห้า..
ความรู้ใหม่อีกแล้วค่ะพี่เจน
แต้งพี่มากมายค่า

#4 By べール★เบว (: on 2007-05-12 20:48

ขอบคุณมากๆจ้า

ธีมหน้าต้องลองแล้วล่ะ

#5 By bentie~ on 2007-05-12 21:51

โอ้...สงสัยอยู่พอดีเลยค่ะเดี๋ยวจะไปทำดูนะคะ
อยากให้สอนการทำcboxหน่อยได้มั๊ยคะขอบคุณมากค่ะ

#6 By eeddy(อี๊ด) on 2007-05-12 22:06

ขอบคุณคะ
เดี้ยวจะลองทำคะ

#7 By *kyu♥~♥min* on 2007-05-12 22:15

ไว้จะลองทำดูคับ

ขอบคุณที่แนะนำวิธีแต่งบล๊อคดีๆคับผม

#8 By wein on 2007-05-12 22:33

อุ๊ย!! เก๋ไก๋ชไนเดอร์มากเลยค่ะ

ขอบคุรสำหรับเทคนิคนะคะ ว่าจะลองทำไปเล่นบ้างแต่ เราดันแหกหน้าบล็อคเต็มๆไปซะแล้ว อดเลย^^"

#9 By พระนางผึ้งบ้า on 2007-05-12 22:46

ถ้าได้ทำthemeใหม่เมื่อไหร่จะลองดูค่ะ
น่าสนุก

#10 By (｡_ ｡)ฟาร์มกระต่ายบ๊อง Half-Crazy Rabbit⌒★ on 2007-05-12 22:53

ยังงงๆ ครับ

หมายถึงว่าโค้ดนี้เป็นอีกรูปที่แยกต่างหากกับ background-image ใช่มั้ยครับ ?
สมมุติของคุณเจนเนสซ่า background-image คือส่วนที่เป็นสีชมพู
ส่วนโค้ดใหม่ที่เพิ่มลงไปคือกระถาง
ผมเข้าใจถูกมั้ยครับ

#11 By วัชระ on 2007-05-12 23:23

ไอว่าน่ารักดีอ่ะงิ

#12 By ☆[ i ]Rin☆ on 2007-05-12 23:28

ขอบคุณเจ้าของblogมากคะ อยากได้กระถางน้อยๆพอดีเลยคะ

#13 By หนูกระปุกตั้งฉ่าย on 2007-05-12 23:50

ขอบคุณมากค่า >_<

เรียบง่ายแต่มีสไตล์

อิอิ

แต่ว่าอยากรู้ว่า พวก%เนี่ย ใส่ต่อหลัง fixed ตำแหน่งได้เลยใช่มะคะ

ไม่ต้องมีตัวอะไรคั่นใช่มะคะ

#14 By “★” Cha•Jin “★” on 2007-05-12 23:58

ขอบคุณนะคะ เจ๋งจริงๆเลย

#15 By ۞[rangiku]۞Ti amo Gokudera on 2007-05-13 00:48

ดีจัง ...
กระถางดอกไม้ ..
ขอบคุณครับ

#16 By (¯`•¸®·neo590·) °´¯)* on 2007-05-13 00:50

กระถางต้นไม้น่ารักจังครับ

#17 By ลีเวด = หม่าว = ^-w-^ on 2007-05-13 04:01

...

ขอยืมบ้างนะคะ
กระถางดอกไม้กะจิ๋วหลิว
ขอบคุณคนใจดี

...

#18 By กะจิ๋วหลิว on 2007-05-13 08:49

ขอบคุณที่แนะนำค่า ><

#19 By --+ รูมีนจี้ =w= +-- on 2007-05-13 11:23

โหมีความรู้ๆ ชอบกล่องคอมเม้นต์สวยดีนะค่ะ

#20 By ChOcoLatE on 2007-05-13 14:16

ขอบคุณสำหรับTutorialครับ
กระถางดอกไม้วาดมือหรือใช้โปรแกรมอะไรครับนี่
น่ารักดีๆ
รู้สึกว่าผมจะกลายเป็นแฟนปล๊อกคุณเจนแล้วนะเนี่ย
ขอรับfeedไปล่ะคร้าบ ชแว๊บ!!

#21 By bugton (203.113.60.12) on 2007-05-13 14:24

เห เจ๋งดีแฮะ เด๋วต้องมีลอง

#22 By Tob..ta..lob..tob..tab on 2007-05-13 15:28

ความคิดดีจังเลยคะ ขอบคุณนะค่า

#23 By cha_o_chan on 2007-05-13 15:55

อ่า... ตอบทีละคนนะคะ

คุณอี๊ดคะ การใส่ cbox ลองไปอ่านที่ http://house108.exteen.com/20070121/lesson7-cbox ค่ะ เจนเนสซ่าก็อ่านจากบลอคนี้เหมือนกัน เค้ามีรูปประกอบด้วยค่ะ ลองดูนะคะ

คุณวัชระคะ background-image คือรูปประถางต้นไม้ค่ะ ส่วน background-color คือสีชมพู ถ้าใส่โค้ดที่เจนเนสซ่าบอกไว้ในเอนทรี ก็ไม่ต้องใส่ background-image และ background-color แล้วค่ะ เพราะในคำสั่งนั้นได้กำหนดไว้หมดแล้ว ดังนั้น ถ้าใน .site มี background-image หรือ background-color อยู่ ก็ต้องคอมเมนต์ออกก่อนที่จะใช้โค้ดอันนี้นะคะ เพราะไม่งั้นมันจะเป็นการกำหนดซ้ำกัน

เอ... ถ้ายังงงอยู่ แวะมาถามได้อีกนะคะ

#26 By เจนเนสซ่า on 2007-05-13 20:51

ตอบ ChaJin ใส่ต่อหลังจากคำว่า fixed ได้เลยค่ะ ตัวอย่างเช่น

background: #fff9fb url(http://jennessa.exteen.com/images/akami.gif) no-repeat fixed 80% 100%

กระถางต้นไม้ไม่ได้วาดเองหรอกค่ะ เอามาจากเวบ.... จำไมได้แล้ว ไว้เดี๋ยวหามาให้นะคะ

#27 By เจนเนสซ่า on 2007-05-13 20:51

เป็นแนวทางที่ตั้งใจไว้สำหรับ New Theme ครับ
รอแค่ความฝันเป็นจริง
ก็คงได้ฤกษ์เปลี่ยน theme ครับ

#28 By AkE on 2007-05-14 14:11

อิอิ ดูน่ารักไปอีกแบบครับผม น่าสนใจดี จะลองเอาไปใช้ดูมั่งครับผม Thx. มากๆ ครับ ^^*

#29 By ニュビーズ ☆彡 on 2007-05-14 18:38

ขอบคุณค่า ..... เดี๋ยวจะลองเอาไปทำดูนะคะ

ไม่รู้ว่าจะใส่รูปรัยดีอ่ะค่ะ อิอิ คิดๆ

#30 By นู๋ส้มเขียวหวาน [ MV - SONG - LYRICS ] on 2007-05-15 09:50

ดีจัง เด่วลองไปทำดูบ้างดีกว่า
ขอบคุณนะคะ

#31 By Evil-minded Angel on 2007-05-16 16:55

ขอบคุณนะจ๊ะ พี่จ๋า
มันดูหวานมากเลย

#32 By [ coolguy ★ ก้อย ] on 2007-05-22 12:46

นำไปใช้แล้วล่ะค่ะ ขอบคุณๆๆๆๆๆ

#33 By [ coolguy ★ ก้อย ] on 2007-05-25 08:47

ช่วยสอนการเอา วีดีโอมาลงหน่อยคับ

#34 By boro on 2007-06-12 20:23

ว้าว เป็นประโยชน์มากเลยงับ ขอบคุณมากค้าบ

#35 By งุงิ!! ( 'w')/ on 2007-06-20 07:48

ทำไม่ได้อ่าเจน ถ้าเกิดว่าลินมี ภาพเป็น BG อยู่แล้วอ่ะ ลินจะยังใช้ Code นี้ได้อยู่มะคะ??? เพราะว่า BG ของลินไม่ใช่สีพื้นๆน่ะค่ะ แต่เป็นภาพมาอีกที ถ้าตอบลินได้จะดีมากเลยค่ะ