ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
เราใช้งานบน Cloud Computing แทบทุกวันแต่เราไม่เคยรู้
โดย kubarnaza จ 18 ธ.ค. 2017 5:21 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
4
จ 18 ธ.ค. 2017 5:21 pm โดย kubarnaza
ปฏิวัติฝ่าย IT รองรับ Cloud อย่างจริงจัง
โดย kubarnaza จ 18 ธ.ค. 2017 4:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
จ 18 ธ.ค. 2017 4:38 pm โดย kubarnaza
Warning! - [44311] Request fields Invoice Ref.
โดย thatsawan จ 18 ธ.ค. 2017 4:15 pm บอร์ด OpenERP/Odoo Warning Message Note
0
1
จ 18 ธ.ค. 2017 4:15 pm โดย thatsawan
Warning! - [44310] Request fields Express Ref.
โดย thatsawan จ 18 ธ.ค. 2017 4:14 pm บอร์ด OpenERP/Odoo Warning Message Note
0
2
จ 18 ธ.ค. 2017 4:14 pm โดย thatsawan
Warning! - [44308] This user cannot access. Request approved By Accouting.
โดย thatsawan จ 18 ธ.ค. 2017 4:07 pm บอร์ด OpenERP/Odoo Warning Message Note
0
3
จ 18 ธ.ค. 2017 4:07 pm โดย thatsawan
แจกฟรี!! ปฏิทิน แมวเหมียว ปี 2018 พร้อมวันหยุด - ปฏิทิน 2561 โหลดเลยถ้าคุณรักแมว!!!
โดย Before Dong จ 18 ธ.ค. 2017 11:15 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
จ 18 ธ.ค. 2017 11:15 am โดย Before Dong
ยกคิ้ว คืออะไร ทำให้หน้าเด็กลงจริงมั้ย ??
โดย bunnyreview จ 18 ธ.ค. 2017 11:09 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
จ 18 ธ.ค. 2017 11:09 am โดย bunnyreview
คนทั่วไปคิด กับ โปรแกรมเมอร์คิด
โดย Before Dong จ 18 ธ.ค. 2017 10:17 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
จ 18 ธ.ค. 2017 10:17 am โดย Before Dong
MDFiles Components <Error>
โดย Nus อ 17 ธ.ค. 2017 4:18 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
21
อ 17 ธ.ค. 2017 4:18 pm โดย tsukasaz
ปฏิทินจีนปี 2561
โดย mindphp ส 16 ธ.ค. 2017 1:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
39
ส 16 ธ.ค. 2017 1:25 pm โดย mindphp
แนบไฟล์ภาพ เขียน เขียน code insert จะนำข้อมูลลง DB
โดย Mmn ส 16 ธ.ค. 2017 1:12 pm บอร์ด SQL - Database
3
38
ส 16 ธ.ค. 2017 1:12 pm โดย mindphp
อัพเกรด Joomla 3.7 เป็น 3.8.3 แบบ Manual ไม่ได้ครับ
โดย Before Dong ศ 15 ธ.ค. 2017 7:07 pm บอร์ด Joomla Development
0
28
ศ 15 ธ.ค. 2017 7:07 pm โดย Before Dong
[ปัญหา] ได้ข้อมูลมา แต่ต้องการจะแยกข้อมูลทีละตัวเพื่อเอาไปใช้งานค่ะ
โดย Wallapa ศ 15 ธ.ค. 2017 7:02 pm บอร์ด Programming - C/C++ & java & Python
0
32
ศ 15 ธ.ค. 2017 7:02 pm โดย Wallapa
สงคราม OpenStack ปะทะ VMware ร้อนแรงเมื่อมี IoT และ NFV
โดย kubarnaza ศ 15 ธ.ค. 2017 5:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
ศ 15 ธ.ค. 2017 5:48 pm โดย kubarnaza
[ปัญหา] ดึงข้อมูลเพื่อให้แสดงค่าใน PDF แต่ Error ค่ะ
โดย Wallapa ศ 15 ธ.ค. 2017 10:59 am บอร์ด Programming - C/C++ & java & Python
4
76
ศ 15 ธ.ค. 2017 10:59 am โดย Wallapa
ปฏิทินบัญชี ที่รวบรวมวันยื่นภาษีที่ทุกองค์กรต้องยื่น ปี 2018/ ปฏิทิน 2561 พร้อมวันหยุด - โหลดก่อนได้ก่อนอย่ารอช้า!
โดย Before Dong ศ 15 ธ.ค. 2017 10:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
83
ศ 15 ธ.ค. 2017 10:23 am โดย Before Dong
ฝันร้ายของโปรแกรมเมอร์
โดย Before Dong ศ 15 ธ.ค. 2017 9:42 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
157
ศ 15 ธ.ค. 2017 9:42 am โดย mindphp
[ปัญหา] เขียน selenium เพื่อcheck error แต่โค้ดที่เขียนเกิด error
โดย Panchalee พฤ 14 ธ.ค. 2017 9:27 pm บอร์ด Programming - C/C++ & java & Python
2
46
พฤ 14 ธ.ค. 2017 9:27 pm โดย mindphp
รบกวนขอวิธีคำนวนหาจำนวนตามข้อความครับ
โดย Artayaarray Dear พฤ 14 ธ.ค. 2017 4:41 pm บอร์ด Programming - PHP
1
33
พฤ 14 ธ.ค. 2017 4:41 pm โดย thatsawan
อยากทราบขั้นตอนในการทำ selenium เพื่อเช็ค Error 404
โดย Panchalee พฤ 14 ธ.ค. 2017 3:55 pm บอร์ด Programming - C/C++ & java & Python
1
51
พฤ 14 ธ.ค. 2017 3:55 pm โดย nuattawoot