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

การใช้งาน 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การคำนวณบวก ลบ คูณ หาร ใน Microsoft Excel
โดย ณัฐกฤตา บุญญะฤทธิ์ พ 23 ม.ค. 2019 6:53 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
24
พ 23 ม.ค. 2019 6:53 pm โดย ณัฐกฤตา บุญญะฤทธิ์
javascript แปลง string เป็น number จุดทศนิยม 2 ตำแหน่ง
โดย jataz2 พ 23 ม.ค. 2019 5:56 pm บอร์ด AJAX Javascript Library - jQuery
0
7
พ 23 ม.ค. 2019 5:56 pm โดย jataz2
javascript ใส่ , ที่หลักพัน
โดย jataz2 พ 23 ม.ค. 2019 5:45 pm บอร์ด AJAX Javascript Library - jQuery
0
6
พ 23 ม.ค. 2019 5:45 pm โดย jataz2
To,Cc,Bcc ในการส่ง E-mail ต่างกันอย่างไร
โดย Chidchanok พ 23 ม.ค. 2019 5:40 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
6
พ 23 ม.ค. 2019 5:40 pm โดย Chidchanok
การสร้าง even เพื่อแสดง ณ แถบ user ใน phpbb
โดย Ittichai_chupol พ 23 ม.ค. 2019 5:27 pm บอร์ด PHP Knowledge
0
7
พ 23 ม.ค. 2019 5:27 pm โดย Ittichai_chupol
โซลชาได้ตอบชัดเจนเฟอร์กี้อยู่เบื้องหลังจริงหรือไม่
โดย pimwasineerat พ 23 ม.ค. 2019 4:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 23 ม.ค. 2019 4:38 pm โดย pimwasineerat
Sets Phantom คืออะไรค่ะ หรือหมายถึงอะไร
โดย ณัฐกฤตา บุญญะฤทธิ์ พ 23 ม.ค. 2019 4:13 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
26
พ 23 ม.ค. 2019 4:13 pm โดย ณัฐกฤตา บุญญะฤทธิ์
Q - สอบถามเรื่อง ส่งค่า Django to PDF
โดย theoneozz พ 23 ม.ค. 2019 3:48 pm บอร์ด Programming - C/C++ & java & Python
0
10
พ 23 ม.ค. 2019 3:48 pm โดย theoneozz
Q - สอบ ถามเรื่อง python tkinter วิธีทำ PDF
โดย ichimarusoichi พ 23 ม.ค. 2019 3:25 pm บอร์ด Programming - C/C++ & java & Python
4
24
พ 23 ม.ค. 2019 6:57 pm โดย ichimarusoichi
จำหน่าย ปูนแดง ปูนกินหมาก ทำน้ำปูนใส ส่งทั่วประเทศ
โดย Tanadet พ 23 ม.ค. 2019 2:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
พ 23 ม.ค. 2019 2:00 pm โดย Tanadet
การตั้งค่าส่วนตัว ในส่วนของการระบุเพศ คุณสามารถระบุเพศของคุณด้วยวิธีนี้
โดย จันนุสรณ์ ดีแก่ พ 23 ม.ค. 2019 1:30 pm บอร์ด phpBB user Guide Knowledge
0
5
พ 23 ม.ค. 2019 1:30 pm โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] File Download Extension บล็อคในการดาวโหลด
โดย จันนุสรณ์ ดีแก่ พ 23 ม.ค. 2019 11:58 am บอร์ด phpBB 3.1 Extension Review
0
11
พ 23 ม.ค. 2019 11:58 am โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] Previous / Next topic Extension หัวข้อก่อนหน้า / ถัดไป
โดย จันนุสรณ์ ดีแก่ พ 23 ม.ค. 2019 11:25 am บอร์ด phpBB 3.1 Extension Review
0
7
พ 23 ม.ค. 2019 11:25 am โดย จันนุสรณ์ ดีแก่
เมื่อหยุดยาวแล้วมาทำงาน
โดย จันนุสรณ์ ดีแก่ พ 23 ม.ค. 2019 10:38 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
พ 23 ม.ค. 2019 10:38 am โดย จันนุสรณ์ ดีแก่
อยากทราบวิธีการล้างค่าหลังทำการอัพโหลดเสร็จ ใน phpbb
โดย Ittichai_chupol ส 12 ม.ค. 2019 10:57 am บอร์ด Programming - PHP
1
45
อ 22 ม.ค. 2019 6:10 pm โดย Ittichai_chupol
การแบ่งประเภทของกิจการตามลักษณะการดำเนินงาน
โดย Chidchanok อ 22 ม.ค. 2019 3:05 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
อ 22 ม.ค. 2019 3:05 pm โดย Chidchanok
การจัดทำงบกระแสเงินสด
โดย Chidchanok อ 22 ม.ค. 2019 2:05 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
15
อ 22 ม.ค. 2019 2:05 pm โดย Chidchanok
PM 2.5
โดย จันนุสรณ์ ดีแก่ อ 22 ม.ค. 2019 1:35 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
อ 22 ม.ค. 2019 1:35 pm โดย จันนุสรณ์ ดีแก่
การตั้งค่าให้เว็บบอร์ด สามารถทำการเปลี่ยนชื่อผู้ใช้ได้ สำหรับแอดมินหรือผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ อ 22 ม.ค. 2019 1:18 pm บอร์ด phpBB user Guide Knowledge
0
12
อ 22 ม.ค. 2019 1:18 pm โดย จันนุสรณ์ ดีแก่
การทำตัว Check Box ใน Google Sheets
โดย Chidchanok อ 22 ม.ค. 2019 12:22 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
16
อ 22 ม.ค. 2019 12:22 pm โดย Chidchanok