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

การใช้งาน background-position จัดตำแหน่งพื้นหลังในกรณีพื้นหลังเป็นรูปภาพ

 

          ในการใส่พื้นหลังเป็นรูปภาพเราสามารถจัดตำแหน่งของพื้นหลังได้โดยสามารถจัดให้พื้นหลังอยู่กึ่งกลางหรือจะให้อยู่ด้านซ้ายของหน้าจอหรือด้านขวาของหน้าจอก็ได้โดยใช้คำสั่ง background-position และใส่ค่าให้เป็น center หรือ left หรือ right ให้กับรูปภาพของเราได้

 

ตัวอย่างการจัดพื้นหลังรูปภาพให้อยู่กึ่งกลาง ดังรูปตัวอย่าง

background-image ใช้ในการกำหนดพื้นหลังให้เป็นรูปภาพ
การใช้งาน background-image เพื่อจัดตำแหน่งพื้นหลัง

 

วิธีการทำ

  1. สร้าง class css ในไฟล์ css มา 1 class ดังตัวอย่าง
    .backgroundimg{
       //.......โค้ด css........
    }​
  2. เพิ่มคำสั่ง css ลงใน class  ดังตัวอย่าง
    .backgroundimg{
          background-image: url('../img/background.jpg');
          background-repeat: no-repeat;
          background-position: center;
          height: 888;
    }​
  3. นำชื่อ class css ไปใส่ใน class ในแท็กที่เราต้องการจะใส่พื้นหลัง ดังตัวอย่าง
    <div class="container-fluid ">
         <div class="col-12 backgroundimg imgcenter">
              <img src="/img/animalia-3208412_960_720.jpg" alt="" width="500"/>
         </div>
    </div>​
  4. รวมโค้ด
    <html>
            <head>
                    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
            </head>
            <body>
                    <div class="container-fluid ">
                            <div class="col-12 backgroundimg imgcenter">
                                    <img src="/img/animalia-3208412_960_720.jpg" alt="" width="500"/>
                            </div>
                    </div>
            </body>
    </html>​

 

 ในการจัดตำแหน่งพื้นหลังที่เป็นรูปภาพจะช่วยจัดในกรณีที่รูปภาพเล็กกว่าพื้นที่ที่จะให้แสดงหรือต้องการให้พื้นหลังอยู่ตำแหน่งที่เราต้องการได้ 

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
มีส่วนเสริมตัวไหนทำระบบแจ้งผลการเรียนได้ไหมครับ
โดย toonytoony2004 จ 25 มี.ค. 2019 8:33 pm บอร์ด Joomla Development
0
11
จ 25 มี.ค. 2019 8:33 pm โดย toonytoony2004
วันนี้กินอะไรดี
โดย สริญญา สมสา จ 25 มี.ค. 2019 6:16 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
จ 25 มี.ค. 2019 6:16 pm โดย สริญญา สมสา
CSS Tips : การไล่ระดับสีด้วย CSS
โดย abdkode จ 25 มี.ค. 2019 5:17 pm บอร์ด CSS Knowledge
0
11
จ 25 มี.ค. 2019 5:17 pm โดย abdkode
ผมรัน Python27 แล้ว Error ImportError: No module named client ลองติดตั้ง pip client แล้วยังเหมือนเดิมครับ
โดย tatiya จ 25 มี.ค. 2019 5:09 pm บอร์ด Programming - C/C++ & java & Python
1
42
จ 25 มี.ค. 2019 5:12 pm โดย tatiya
วีดีโอภาษีอีเพย์เมนต์
โดย สริญญา สมสา จ 25 มี.ค. 2019 5:05 pm บอร์ด MT32 - นางสาวสริญญา สมสา
0
1
จ 25 มี.ค. 2019 5:05 pm โดย สริญญา สมสา
วิธีดึงข้อมูล API ธนาคารเเห่งประเทศไทย ด้วย Python
โดย tatiya จ 25 มี.ค. 2019 4:27 pm บอร์ด Programming - C/C++ & java & Python
0
20
จ 25 มี.ค. 2019 4:27 pm โดย tatiya
กฎหมายภาษีอีเพย์เมนต์
โดย สริญญา สมสา จ 25 มี.ค. 2019 1:47 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
16
จ 25 มี.ค. 2019 1:47 pm โดย สริญญา สมสา
วิธีการเปิดใช้งาน การตอบกลับด่วย ใน เว็บบอร์ด phpbb
โดย Ittichai_chupol จ 25 มี.ค. 2019 11:45 am บอร์ด PHP Knowledge
0
9
จ 25 มี.ค. 2019 11:45 am โดย Ittichai_chupol
วิธีแก้ไข การ import ฐานข้อมูล ที่ server ต่าง vesion กัน ทำยังไงครับ
โดย beking2539 จ 25 มี.ค. 2019 11:44 am บอร์ด SQL - Database
0
21
จ 25 มี.ค. 2019 11:44 am โดย beking2539
งานประจำวันที่ 25 มีนาคม 2562
โดย สริญญา สมสา จ 25 มี.ค. 2019 9:49 am บอร์ด MT32 - นางสาวสริญญา สมสา
1
2
จ 25 มี.ค. 2019 10:01 am โดย สริญญา สมสา
งานประจำวันที่ 25 มีนาคม 2562
โดย napharat079 จ 25 มี.ค. 2019 9:42 am บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
1
2
จ 25 มี.ค. 2019 7:00 pm โดย napharat079
ฟุตบอล-บาสเกตบอล
โดย Nhani ส 23 มี.ค. 2019 7:56 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
32
ส 23 มี.ค. 2019 7:56 pm โดย Nhani
export jar ไปใช้เครื่องอื่นพร้อม database
โดย Saharat Saharat ส 23 มี.ค. 2019 6:46 pm บอร์ด Programming - C/C++ & java & Python
0
54
ส 23 มี.ค. 2019 6:46 pm โดย Saharat Saharat
งานประจำวันที่ 23 มีนาคม 2562
โดย napharat079 ส 23 มี.ค. 2019 9:41 am บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
3
10
ส 23 มี.ค. 2019 7:08 pm โดย napharat079
งานประจำวันที่ 23 มีนาคม 2562
โดย Four ส 23 มี.ค. 2019 9:08 am บอร์ด M077 - อิษยา งามสอาด
2
5
จ 25 มี.ค. 2019 10:25 am โดย thatsawan
Q - ผมติดตั้ง โมดูลฟอนต์ (oecn_base_fonts) ไม่ได้ ปัญหานี้เกิดบนเครื่อง Ubuntu 16.04 นะครับ
โดย tatiya ศ 22 มี.ค. 2019 5:51 pm บอร์ด OpenERP - MD-ERP
1
7
ศ 22 มี.ค. 2019 6:08 pm โดย tatiya
วิธีทำให้ผมสวย
โดย สริญญา สมสา ศ 22 มี.ค. 2019 3:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
47
ส 23 มี.ค. 2019 7:51 pm โดย Nhani
วิธีสร้าง color palette จากรูปภาพของตัวเองได้ง่ายๆไม่ซ่ำใคร
โดย napharat079 ศ 22 มี.ค. 2019 3:28 pm บอร์ด Graphic design
0
45
ศ 22 มี.ค. 2019 3:28 pm โดย napharat079
อยากทราบวิธีการ เปลี่ยน รูป icon ที่ Tab ของ Browser บน เว็บบอร์ด phpbb
โดย Ittichai_chupol ศ 22 มี.ค. 2019 3:28 pm บอร์ด Programming - PHP
1
50
ศ 22 มี.ค. 2019 3:34 pm โดย mindphp
Stedia Google Game Platform คืออะไร
โดย Ittichai_chupol ศ 22 มี.ค. 2019 2:36 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
54
ศ 22 มี.ค. 2019 2:36 pm โดย Ittichai_chupol