*JouRney , LiFe , FaShion , ChiC.*//
Group Blog
 
 
พฤศจิกายน 2549
 
 1234
567891011
12131415161718
19202122232425
2627282930 
 
16 พฤศจิกายน 2549
 
All Blogs
 

บทที่ 2: background *// เริ่มต้นง่ายๆ

Background
วันนี้ขอนำเสนอการใส่ background ค่ะ ใครยังใส่ background ไม่ได้ ลองอ่านดูนะคะ

เริ่มแรก

เริ่มแรกก็ต้องเข้าไป ที่ ปรับแต่งเว็บ blog แล้วเลือก theme เป็น theme อิสระ ก่อน แบบว่าบอกให้รู้ว่าจะแต่งเองแล้วนะ ไม่ใช้ pattern แล้ว

ขั้น basic

ถ้าเป็นมือใหม่ต้องมาเริ่มกันที่ เปลี่ยนสีพื้น กับ logo กันก่อนเลย

  • เปลี่ยนสีพื้น




<style>body{background:#รหัสสีตามชอบ}></style>



  • ใส่ logo




<script>document.images[0].src = "ใส่ url ของรูป"; document.images[0].width =780 ; document.images[0].height =150</script>



ความกว้างกับสูงก็กำหนดตามรูปที่นำมาเป็นโลโกค่ะ แล้วจะรู้ได้ยังไง ??? ก็รูปที่เก็บไว้ในเครื่องต้อง คลิ๊กขวา ==> properties ==> summary มันจะบอก dimension ของรูปแล้วค่ะ

***หน้าจอปกติ 1024*780 pixels ***

ต้องลองดูว่า รูปประมาณไหนจะใส่แล้วสวย ถ้ารูปสูง ประมาณ 250-350 กำลังดีค่ะ แล้วแต่ชอบด้วย

ใครที่สงสัยว่า URL คืออะไร เอามาจากไหน ตามไปดูที่ blog ของ แม่สลิ่ม เลยค่ะ มีอธิบายไว้อย่างละเอียดค่ะ

  • ถ้าทำสำเร็จน่าจะได้ออกมาประมาณนี้ค่ะ





ขั้น standard


มาดูกันตาม code เลยค่ะ ว่าเปลี่ยนอะไรกันได้บ้าง



<STYLE type="text/css">
<!--
BODY{
background-image : url("ใส่ url ของรูป") ;
background-color : #รหัสสี ;
background-repeat : xxx ;
background-attachment : xxx;
background-position : xxx ;
}
-->
</STYLE>



ถ้าต้องการให้เว้นส่วนหัวของ bg ลงมา ก็ใช้คำสั่ง logo แต่ไม่ใส่รูปไป



<script>document.images[0].width =780 ; document.images[0].height =280</script>



ความสูงของส่วนหัวที่ต้องการก็ลองเปลี่ยนดูให้เหมาะสมกับ bg อะค่ะ

ส่วนของ background ก็เปลี่ยนได้หลักๆ 5 อย่างตามข้างต้น นะคะ สี กับ url ไม่มีอะไรพิเศษ ส่วน background-repeat, background-attachment, background-position ตามนี้ค่ะ



background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
background-repeat : repeat;

background-attachment : scroll;
background-attachment : fixed; ==> เลื่อนไปแต่ตัวหนังสือ

background-position : center top;
background-position : left top;
background-position : right top;
background-position : center center;
background-position : left center;
background-position : right center;
background-position : center bottom;
background-position : left bottom;
background-position : right bottom;



***ถ้าไม่กำหนดตำแหน่งภาพขึ้นจากมุมซ้ายบน***
***การกำหนดตำแน่งเป็น percent ก็ได้ เช่น left top = 0% 0%, center center = 50% 50%, right center = 100%, 50%

ตอนนี้คาดว่าหลายๆคนคงงงๆมากๆแล้วค่ะ มาดูตัวอย่างพร้อมภาพประกอบกันดีกว่า

sample 1



**ขนาดภาพที่ใช้ 420*136**

ภาพนี้ใช้คำสั่ง ให้อยู่มุมขวา, bg ที่เหลือจากภาพเป็นสีขาว, ไม่ซ้ำภาพ



<STYLE type="text/css">
<!--
BODY{
background-image : url("รูปสีส้ม.jpg") ;
background-color : #ffffff ;
background-repeat : no-repeat ;
background-position : top right ;
}
-->
</STYLE>





sample 2



**ขนาดภาพที่ใช้ 64*64**

ภาพนี้ใช้คำสั่งให้ ซ้ำภาพตามแกน x, background ส่วนอื่นสีขาว



<STYLE type="text/css">
<!--
BODY{
background-image : url("รูปท้องฟ้า.jpg") ;
background-color : #ffffff ;
background-repeat : repeat-x ;
}
-->
</STYLE>





sample 3



**ขนาดภาพที่ใช้ 81*70**

ภาพนี้ใช้คำสั่งให้ซ้ำภาพ



<STYLE type="text/css">
<!--
BODY{
background-image : url("หมี.jpg") ;
background-repeat : repeat ;
}
-->
</STYLE>





sample 4



**ขนาดภาพที่ใช้ 1024*280 **
ภาพมันยาวอะค่ะเลยไม่ได้นำมาลง

ใส่ภาพ หัวใจเส้นๆ ภาพที่นำมาใช้สุดที่เส้นอะค่ะ, พื้นที่เหลือใส่สีขาว, ไม่ซ้ำภาพ, ให้อยู่มุมบนขวา(จิงๆไม่ใส่ก็ได้เนื่องจากภาพที่ไม่ได้กำหนด position จะเริ่มจากมุมขวาอยู่แล้ว)

**แล้วก็ใส่ code logo แบบไม่ใส่ภาพ **ส่วนหัวก็จะเว้นลงมาอะค่ะ



<STYLE type="text/css">
<!--
BODY{
background-image : url("หัวใจเส้นๆ.jpg") ;
background-color : #ffffff ;
background-repeat : no-repeat ;
background-position : top right ;
}
-->
</STYLE>

<script>document.images[0].width =780 ; document.images[0].height =280</script>



วิธีนำ script ไปใช้

นำ script ไปใส้ไว้ที่ จัดการ script area ในช่อง จัดการ script และ stylesheet (มีผลทั้ง blog)
ถ้ามี script อื่นอยู่ก่อนแล้วก็เว้นบรรทัดไปนะคะ

**แต่ง blog ไปเรื่อยๆรู้สึกช่องนี้ script มันเยอะแยะมากมายจิงๆอะค่ะ บางทีลืมว่ามันคือ script อะไร - -" ***

ทำไม่ได้ยังไง comment มานะคะ จะได้ไปแก้ไข codeอีกทีค่ะ




 

Create Date : 16 พฤศจิกายน 2549
12 comments
Last Update : 17 พฤศจิกายน 2549 2:18:06 น.
Counter : 634 Pageviews.

 

.. ขอบคุณค่ะ

 

โดย: hayashimali 17 พฤศจิกายน 2549 7:17:59 น.  

 

อธิบายละเอียดดีค่ะ พอจะเข้าใจบ้างแล้ว แถบ blog ของ คุณ snow flurries ยังอ่านง่าย สบายตาดีด้วยค่ะ เก๋good เลยอิอิ


 

โดย: นุช (baby_lotion ) 21 พฤศจิกายน 2549 17:37:56 น.  

 

คำสั่งสอนของท่าน มีประโยชน์เหลือหลาย ขอบคุณก๊าบบบบบบ
บล็อคก็น่ารัก ขออนุญาตแอดจ้า

 

โดย: แมวมอมแมม 24 พฤศจิกายน 2549 11:49:51 น.  

 

โอ้โห...ทำเป็นแล้ว..จขบ.เก่งจัง ขอบคุณนะค้า..

 

โดย: ชิด-ชิด เข้ามาอีกหน่อย 1 ธันวาคม 2549 22:38:32 น.  

 

เป็นภาพจากเวป wallcoo.com น่ะค่ะต้องทำยังไงถึงจะให้มันเป็นรูปเดียวทั้งบล็อก ไม่เป็นรอยต่อกันหลายๆรูปน่ะค่ะ แล้วอยากให้ส่วนของคอมเม้นลอยตัวเป็นอิสระ (อธิบายเข้าใจมั้ยคะ) อิอิ ช่วยตอบด้วยนะคะ จะเข้ามาฟังคำตอบค่า

 

โดย: printcess of the moon 6 ธันวาคม 2549 20:17:06 น.  

 

ก็copy codeด้านล่างไปใส่เลยค่ะ ก็จะได้ background เต็มๆจอแล้วตัวหนังสือเลื่อนไปลอยตัวอะค่ะ^^ ภาพจาก wallcooสวยดีค่ะ

<STYLE type="text/css">
<!--
BODY{
background-image : url("ตรงนี้ใส่urlของรูปนะคะ") ;
background-attachment: fixed;
background-repeat : no-repeat ;
}
-->
</STYLE>

ถ้าไม่ได้ยังไงcommentไว้นะคะเดี๋ยวเข้ามาตอบอีกทีค่ะ

 

โดย: snow flurries 8 ธันวาคม 2549 8:16:45 น.  

 

ป๋มกะลังได้รับมอบหมายให้ดูแล โฮมเพจของสถานีวิทยุ 105.75 MHz. ของมหาวิทยาลัยราชภัฏสงขลา ตอนนี้กะลังปรับปรุงอยู่

ป๋มอยากมี
1. ตัวเลื่อนข้อความบริเวณ welcome
2. ตัวที่เค้าเรียกว่า msg post แบบ scrollbar ไม่รุเรียกถูกรึเปล่าที่มันค่อยๆเลื่อนขึ้นน่ะคับ
3. ตัว google,ค้นหาศัพท์,
4. อยากจะแปะ code ที่ว่า ข่าวประจำวัน หรือว่า "เกมสนุกๆ"คับ

พี่พอจะแนะนำป๋มได้มั้ยคับว่าควรจะไปดูที่ไหนดี

ว่างๆแวะไปหาป๋มบ้างนะคับ

ออ...มีอีก

ป๋ม อยากให้ตรงนี้คอมเม้นของป๋มเป็นพื้นสีคับ จะได้เห็นว่ามีใคร post อะไรไว้ ตอนนี้เป็นสีดำหมดเลย มองไม่เห็นคับ

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

ขอบคุณคับ

 

โดย: บุญหลงคับ (PKpay ) 7 มกราคม 2550 1:52:15 น.  

 

blog สวยอ่านง่ายดีจังค่ะ ขอบคุณนะค่ะ

 

โดย: ตติตา 3 ตุลาคม 2550 17:23:07 น.  

 

ขอบคุณนะคะ

ตอนแรกงงมากจะแต่งบล๊อกยังไง แต่พออ่านแล้ว เข้าใจง่ายมากๆ เลย

 

โดย: But I do. 3 ตุลาคม 2551 17:47:53 น.  

 

อยากได้ bullet ต่างๆกันแบบจขบ.มั่งอะค่ะ

 

โดย: thejkpb 4 มกราคม 2552 18:52:06 น.  

 

ตอนนี้ลง backgroud ได้แล้ว
แอบลอกไปด้วยล่ะ
ขอบคุณนะคะที่ลงไว้ให้ แล้วจะแวะมาบ่อยๆนะ thank จ๊ะ

 

โดย: มีน (min_meen ) 19 มิถุนายน 2552 16:00:28 น.  

 

ขอบคุณค่ะ

 

โดย: R (คนป่าหาธรรม ) 7 สิงหาคม 2553 22:13:27 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 


snow flurries
Location :
thailand//* United States

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 1 คน [?]




Friends' blogs
[Add snow flurries's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.