ให้เรตสมาชิก: 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
อยากรู้วิธีใส่ Google Structure ใน Joomla ว่าใส่ตำแหน่งไหนและแก้ตรงไหนบ้างครับ
โดย Before Dong พฤ 21 ก.ย. 2017 2:20 pm บอร์ด Joomla Development
0
4
พฤ 21 ก.ย. 2017 2:20 pm โดย Before Dong
เมื่อ "ลูกค้า" บอกความต้องการของระบบ
โดย Before Dong พฤ 21 ก.ย. 2017 10:29 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
พฤ 21 ก.ย. 2017 10:29 am โดย Before Dong
oracle Sql loader
โดย jataz2 พ 20 ก.ย. 2017 5:13 pm บอร์ด SQL - Database
0
6
พ 20 ก.ย. 2017 5:13 pm โดย jataz2
ประกันสังคมพร้อมก้าวสู่ Digital SSO ไม่ต้องพกบัตรรับรองสิทธิ ตั้งแต่วันที่ 1 ม.ค. 61 เป็นต้นไป
โดย thatsawan พ 20 ก.ย. 2017 11:03 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
พ 20 ก.ย. 2017 11:03 am โดย thatsawan
เมื่อคุณประชุมทีมแล้ว ทีมไม่เข้าใจที่คุณพูด
โดย Before Dong พ 20 ก.ย. 2017 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พ 20 ก.ย. 2017 10:19 am โดย Before Dong
Joomla 3.8 มาแล้ว
โดย mindphp อ 19 ก.ย. 2017 9:14 pm บอร์ด PHP News
0
12
อ 19 ก.ย. 2017 9:14 pm โดย mindphp
สถานะสถานพยาบาลที่เข้าร่วมประกันสังคม 2560 อัพเดทล่าสุด
โดย thatsawan อ 19 ก.ย. 2017 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
อ 19 ก.ย. 2017 11:32 am โดย thatsawan
ทุกปัญหาใหญ่สำหรับ "User" เสมอ!!
โดย Before Dong อ 19 ก.ย. 2017 10:16 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 19 ก.ย. 2017 10:16 am โดย Before Dong
เจอ Process ไม่พึงประสงค์ ผังและรัน ภายใต้ /tmp ป้องกันไม่ใช้ รันไฟล์ใน tmp
โดย mindphp อ 19 ก.ย. 2017 7:52 am บอร์ด Linux - Web Server
0
11
อ 19 ก.ย. 2017 7:52 am โดย mindphp
ใครใช้ CCleaner เวอร์ชั่นเก่า อัพเกรดด่วน ให้ใหม่กว่า เวอร์ชัน 5.33
โดย mindphp อ 19 ก.ย. 2017 5:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
15
อ 19 ก.ย. 2017 5:29 am โดย mindphp
facebook มันมันบังคับให้ตั้งชื่อใหม่ ให้เป็นชื่อจริงๆ
โดย บุคคลทั่วไป อ 19 ก.ย. 2017 5:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
13
อ 19 ก.ย. 2017 5:18 am โดย บุคคลทั่วไป
สอบถามการประยุกต์ใช้คำสั่ง rect()
โดย Ik Kat จ 18 ก.ย. 2017 6:00 pm บอร์ด JavaScript & Jquery Ajax
0
17
จ 18 ก.ย. 2017 6:00 pm โดย Ik Kat
วิธีแก้ปัญหา Can't create/write to file '/tmp/#sql_6182_0.MAI' (Errcode: 2)
โดย mindphp จ 18 ก.ย. 2017 3:40 pm บอร์ด Linux - Web Server
0
11
จ 18 ก.ย. 2017 3:40 pm โดย mindphp
ทำ pop up ให้ login wordpress
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 1:26 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
21
จ 18 ก.ย. 2017 1:26 pm โดย บุคคลทั่วไป
ธุรกิจกระเป๋าเงินอิเล็กทรอนิกส์ หรือ e-Money คืออะไร
โดย M029 จ 18 ก.ย. 2017 11:46 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
17
จ 18 ก.ย. 2017 11:46 am โดย M029
สร้างฟอร์มรับข้อมูล แล้วส่งไปเก็บที่ phpmyadmin
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 11:31 am บอร์ด Programming - PHP
0
22
จ 18 ก.ย. 2017 11:31 am โดย บุคคลทั่วไป
อยากจะเช็คเงื่อนไขไม่ให้เกิด error แบบนี้ EntityRef: expecting ';', ทำยังไงได้บ้างค่ะ
โดย thatsawan จ 18 ก.ย. 2017 11:28 am บอร์ด Programming - C/C++ & java & Python
4
32
จ 18 ก.ย. 2017 11:28 am โดย mindphp
ขั้นตอนที่ SA คิด ขั้นตอนที่ Programmer ทำ
โดย Before Dong จ 18 ก.ย. 2017 10:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
36
จ 18 ก.ย. 2017 10:25 am โดย P'Eak
selenium python คำสั่ง ใช้สำหรับ การค้นหา Elements บนหน้าเว็บ
โดย mindphp อ 17 ก.ย. 2017 4:53 am บอร์ด Python Knowledge
0
18
อ 17 ก.ย. 2017 4:53 am โดย mindphp
ตั้งค่า MX ของ mailgun เสริมจากบทความ
โดย mindphp ส 16 ก.ย. 2017 9:17 pm บอร์ด Linux - Web Server
1
17
ส 16 ก.ย. 2017 9:17 pm โดย P'Eak