ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 3 CSS3 Backgrounds

การสร้างพื้นหลังบนหน้าเว็บ ใน CSS3 นั้นสามารถทำได้หลายแบบ (สามารถใช้ได้กับทุกบราวเซอร์)
ตัวอย่างเช่น
  การใส่ภาพพื้นหลัง

<html>
<head>
<style> 

body
{background:url(http://www.imagenestop.com/items/hello-kitty-1155.jpg);
background-size:120px 150px;
-moz-background-size:120px 150px; /* Old Firefox */
background-repeat:no-repeat;

</style>
</head>
</html>

ผลลัพธ์คือ

*คำอธิบาย
   background:url(URL ของรูปภาพ);
   background-size:120px 150px; (ขนาดของรูปภาพ)
   -moz-background-size:120px 150px; /* Old Firefox */ (โค๊ดที่ใช้ในการแสดงผลบน firefox)
   background-repeat:no-repeat; (ให้มีเพียงรูปเดียว จะตั้งค่าเป็น no-repeat  แต่หากต้องการมีหลายรูปเรียงต่อกัน จะตั้งค่าเป็น repeat)

นอกจากนี้แล้วเรายังสามารถตั้งค่าตำแหน่งการวางของรูปภาพได้เช่น
 1.การวางรูปภาพให้อยู่ด้านขวา โดยเพิ่มโค๊ด background-position:top right;

<html>
<head>
<style> 
body

{background:url(http://www.imagenestop.com/items/hello-kitty-1155.jpg);
background-size:120px 150px;
-moz-background-size:120px 150px; /* Old Firefox */
background-repeat:no-repeat;
background-position:top right;}
</style>
</head>
</html>

ผลลัพธ์คือ

2.วางรูปภาพให้อยู่ตรงกลาง โดยเพิ่มโค๊ด background-position:center
3.วางรูปภาพแบบ ซ๊ำโดยใช้โค๊ด  background-repeat:repeat  (จากตัวอย่างข้อ 1 ใช้โค๊ด background-repeat:no-repeat; คือเป็นแบบไม่ซ้ำ)
  ผลลัพธ์คือ

4.วางรูปให้มีขนาดกว้างเท่ากับหน้าจอ โดยเปลี่ยน ตัวเลข ให้เป็น 100%

<html>
<head>
<style> 
body
{background:url(http://www.imagenestop.com/items/hello-kitty-1155.jpg);
background-size:100% 100%;
-moz-background-size:100% 100%; /* Old Firefox */
background-repeat:no-repeat;
padding-top:40px;}
</style>
</head>
</html>

ผลลัพธ์คือ

5.หากต้องการใส่ภาพพื้นหลังมากกว่า 1 ภาพ ทำได้ดังนี้

<html>
<head>
<style> 
body
{background-image:url(img_flwr.gif),url(img_tree.gif);
background-repeat:no-repeat;}
</style>
</head>
<body>

</body>
</html>

**โดยเพิ่ม URL  ตามตัวอย่างใน โค๊ดตัวสีแดง  จะสังเกตเห็นว่ามีสองรูปซ้อนกันอยู่

ผลลัพธ์คือ


ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - demo Print loading list ภาษาไทยไม่แสดง
โดย mindphp อ 17 มิ.ย. 2018 12:09 am บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
1
2
อ 17 มิ.ย. 2018 12:28 am โดย mindphp
B - มีโมดูลเกินใน demo
โดย mindphp ส 16 มิ.ย. 2018 11:53 pm บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
0
1
ส 16 มิ.ย. 2018 11:53 pm โดย mindphp
Q - วิธีเรียกตัวแปรมาใช้ในไฟล์ php ที่แสดงในหน้าเว็บใน JoomShopping
โดย Parichat ส 16 มิ.ย. 2018 6:58 pm บอร์ด Joomla Dev
18
44
อ 17 มิ.ย. 2018 10:11 pm โดย Parichat
B - com_mcharts สามารถติดตั้งได้แต่ไม่สามารถเข้าหน้าตั่งค่าได้
โดย Parichat ส 16 มิ.ย. 2018 5:12 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 16 มิ.ย. 2018 5:12 pm โดย Parichat
B - com_MJUpgrade ไม่สามารถติดตั้งได้
โดย Parichat ส 16 มิ.ย. 2018 4:48 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 16 มิ.ย. 2018 4:48 pm โดย Parichat
B - com_M2OpenERP Migration สามารถติดตั้งได้แต่ไม่สามารถใช้งานได้
โดย Parichat ส 16 มิ.ย. 2018 4:31 pm บอร์ด M2OpenERP
0
2
ส 16 มิ.ย. 2018 4:31 pm โดย Parichat
controller เรียกใช้ function ใน model ใน JoomShopping
โดย Parichat ส 16 มิ.ย. 2018 3:38 pm บอร์ด Joomla Developing Knowledge
0
21
ส 16 มิ.ย. 2018 3:38 pm โดย Parichat
งานประจำวันที่ 16 มิถุนายน 2561
โดย Rujikon ส 16 มิ.ย. 2018 9:40 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
4
ส 16 มิ.ย. 2018 7:06 pm โดย Rujikon
งานประจำวันที่ 16 มิถุนายน 2561
โดย Parichat ส 16 มิ.ย. 2018 9:35 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
2
ส 16 มิ.ย. 2018 7:09 pm โดย Parichat
งานประจำวันที่ 16 มิถุนายน 2561
โดย wilawan ส 16 มิ.ย. 2018 8:33 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
2
10
ส 16 มิ.ย. 2018 7:02 pm โดย thatsawan
upload file ไม่เข้าค่ะผิดตรงไหนค่ะ รบกวนแนะนำหน่อยค่ะ _/|\_
โดย supattra_su ศ 15 มิ.ย. 2018 6:08 pm บอร์ด Programming - PHP
1
40
ส 16 มิ.ย. 2018 1:03 am โดย mindphp
ฺB - In Process ชื่อลูกค้าหาย [2018-01][017]
โดย Rujikon ศ 15 มิ.ย. 2018 5:53 pm บอร์ด Hachanna - Testter
0
4
ศ 15 มิ.ย. 2018 5:53 pm โดย Rujikon
R - อัพเดท state auto หลังจาก state ของ RMA เป็น deliver
โดย nuattawoot ศ 15 มิ.ย. 2018 5:13 pm บอร์ด อาร์ซีพี โกลบอล จำกัด - Tester
2
12
ส 16 มิ.ย. 2018 1:53 pm โดย Rujikon
Q - ทำให้รูปฟีเจอร์ของสินค้าคลิกไปแล้วให้ได้ตรงกับสินค้าที่เปิดเข้าไปดู
โดย Parichat พฤ 14 มิ.ย. 2018 5:24 pm บอร์ด Joomla Dev
36
86
ส 16 มิ.ย. 2018 10:04 am โดย Parichat
บริษัท Hachana แจ้งอัพข้อมูล
โดย Rujikon ศ 15 มิ.ย. 2018 3:48 pm บอร์ด Mindphp Task (ทดลองงาน)
0
7
ศ 15 มิ.ย. 2018 3:48 pm โดย Rujikon
R - ERP ของบริษัท Expenses จะต้องไม่เห็นค่าใช้จ่ายของคนอื่น (M055) เห็นหมดเลย
โดย thatsawan ศ 15 มิ.ย. 2018 2:23 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
1
3
ศ 15 มิ.ย. 2018 2:23 pm โดย thatsawan
วิธีหาวันเเรกเเละวันที่สิ้นสุด ของปีใน python
โดย thatsawan ศ 15 มิ.ย. 2018 1:24 pm บอร์ด Python Knowledge
0
16
ศ 15 มิ.ย. 2018 1:24 pm โดย thatsawan
หลักการเก็บข้อมูลสำหรับการพัฒนาระบบ
โดย wilawan ศ 15 มิ.ย. 2018 1:23 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
0
6
ศ 15 มิ.ย. 2018 1:23 pm โดย wilawan
B - หน้ารายการสินค้าต้องมีกรอบสีขาว
โดย tsukasaz ศ 15 มิ.ย. 2018 11:44 am บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
7
ศ 15 มิ.ย. 2018 12:15 pm โดย Parichat
งานประจำวันที่ 15 มิถุนายน 2561
โดย Rujikon ศ 15 มิ.ย. 2018 9:47 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
1
9
ศ 15 มิ.ย. 2018 6:41 pm โดย Rujikon