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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ทำกราฟ เปรียบเทียบ ค่าธรรมเนียมของแต่ละธนาคาร
โดย chatee supasand พ 18 ก.ย. 2019 7:24 pm บอร์ด MT33 - นายชาตรี สุภาแสน
1
6
พ 18 ก.ย. 2019 7:29 pm โดย mindphp
ทำไมต้องอัพเกรดและวิธีอัพเกรด Ubuntu
โดย jirawoot พ 18 ก.ย. 2019 7:02 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
5
พ 18 ก.ย. 2019 7:02 pm โดย jirawoot
Adobe Premiere Pro เปิดตัวฟีเจอร์ปรับขนาดเฟรมวิดีโออัตโนมัติด้วย AI รองรับโซเชียลแอป
โดย birdkritsna พ 18 ก.ย. 2019 6:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
พ 18 ก.ย. 2019 6:05 pm โดย birdkritsna
ทำความรู้จัก Tape Backup
โดย aninthana พ 18 ก.ย. 2019 5:57 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
5
พ 18 ก.ย. 2019 5:57 pm โดย aninthana
VDO แนะนำการสมัคร skype
โดย chatee supasand พ 18 ก.ย. 2019 3:58 pm บอร์ด MT33 - นายชาตรี สุภาแสน
1
8
พ 18 ก.ย. 2019 4:51 pm โดย mindphp
R - tools_exchange_rate
โดย birdkritsna พ 18 ก.ย. 2019 2:18 pm บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
0
19
พ 18 ก.ย. 2019 2:18 pm โดย birdkritsna
งานประจำวันที่ 18 กันยายน 2562
โดย birdkritsna พ 18 ก.ย. 2019 10:26 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
1
13
พ 18 ก.ย. 2019 7:38 pm โดย birdkritsna
งานประจำวันที่ 18 กันยายน 2562
โดย Patipat พ 18 ก.ย. 2019 10:20 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
4
พ 18 ก.ย. 2019 7:22 pm โดย Patipat
งานประจำวันที่ 18 กันยายน 2562
โดย chatee supasand พ 18 ก.ย. 2019 10:16 am บอร์ด MT33 - นายชาตรี สุภาแสน
2
12
พ 18 ก.ย. 2019 7:27 pm โดย chatee supasand
งานประจำวันที่ 18 กันยายน 2562
โดย jirawoot พ 18 ก.ย. 2019 10:06 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
3
8
พ 18 ก.ย. 2019 7:42 pm โดย jirawoot
งานประจำวันที่ 18 กันยายน 2562
โดย jamepiyawat พ 18 ก.ย. 2019 10:05 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
7
พ 18 ก.ย. 2019 10:05 am โดย jamepiyawat
งานประจำวันที่ 18 กันยายน 2562
โดย aninthana พ 18 ก.ย. 2019 9:54 am บอร์ด M092 - อนินธนา บุญยัง
1
13
พ 18 ก.ย. 2019 6:42 pm โดย aninthana
สร้างแบบสอบถามออนไลน์ ด้วย Excel Survey บน OneDrive
โดย birdkritsna อ 17 ก.ย. 2019 6:31 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
28
อ 17 ก.ย. 2019 6:31 pm โดย birdkritsna
ทำไมจึงต้องมี Data Mining (เหมืองข้อมูล) ?
โดย birdkritsna อ 17 ก.ย. 2019 6:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
31
อ 17 ก.ย. 2019 6:04 pm โดย birdkritsna
ทำความรู้จักกับ Big Data คืออะไร
โดย birdkritsna อ 17 ก.ย. 2019 5:36 pm บอร์ด SQL Knowledge
1
42
อ 17 ก.ย. 2019 5:52 pm โดย mindphp
วิธีการใช้งานฟังชั่น serialize() กับ unserialize() ใน phpbb
โดย Ittichai_chupol อ 17 ก.ย. 2019 5:18 pm บอร์ด PHP Knowledge
0
20
อ 17 ก.ย. 2019 5:18 pm โดย Ittichai_chupol
รู้จักกับคลังข้อมูล(Data Warehouse) คืออะไร มีประโยชน์อะไรบ้าง
โดย birdkritsna อ 17 ก.ย. 2019 5:11 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
อ 17 ก.ย. 2019 5:11 pm โดย birdkritsna
MS Exchange ไมโครซอฟท์ต่ออายุซัพพอร์ต 2010 ให้อีก 9 เดือน ถึง ตุลาคม 2020
โดย chatee supasand อ 17 ก.ย. 2019 5:09 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
19
อ 17 ก.ย. 2019 5:09 pm โดย chatee supasand
สิ่งที่ต้องทำ ก่อนโทรศัพท์หายหรือโดนขโมย
โดย birdkritsna อ 17 ก.ย. 2019 3:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 17 ก.ย. 2019 3:23 pm โดย birdkritsna
VDO - ขั้นตอนการยกเลิกใบแจ้งหนี้ด้วยวิธีที่ถูกต้อง
โดย EyePornnipa อ 17 ก.ย. 2019 3:05 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
14
อ 17 ก.ย. 2019 5:32 pm โดย EyePornnipa