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

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการแปลงไฟล์ .html เป็น pdf ด้วย wkhtmltopdf ร่วมกับ flask
โดย jirawoot ส 20 ก.ค. 2019 11:48 am บอร์ด Python Knowledge
0
1
ส 20 ก.ค. 2019 11:48 am โดย jirawoot
เจอปัญหา Joomla Error Error: Failed to start application: Error starting the session.
โดย mindphp ส 20 ก.ค. 2019 11:22 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
2
ส 20 ก.ค. 2019 11:22 am โดย mindphp
งานประจำวันที่ 20 กรกฎาคม 2562
โดย Patipat ส 20 ก.ค. 2019 10:24 am บอร์ด M088 - ปฏิภัทร สารธรรม
0
2
ส 20 ก.ค. 2019 10:24 am โดย Patipat
งานประจำวันที่ 20 กรกฎาคม 2562
โดย jamepiyawat ส 20 ก.ค. 2019 10:15 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
4
ส 20 ก.ค. 2019 10:15 am โดย jamepiyawat
งานประจำวันที่ 20 กรกฎาคม 2562
โดย EyePornnipa ส 20 ก.ค. 2019 10:02 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
9
ส 20 ก.ค. 2019 10:02 am โดย EyePornnipa
งานประจำวันที่ 20 กรกฎาคม 2562
โดย jirawoot ส 20 ก.ค. 2019 10:00 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
2
ส 20 ก.ค. 2019 10:00 am โดย jirawoot
สรุปการเขียน Module Openerp
โดย chatee supasand ศ 19 ก.ค. 2019 7:39 pm บอร์ด MT33 - นายชาตรี สุภาแสน
1
5
ส 20 ก.ค. 2019 10:27 am โดย tatiya
ปัญหา Error GROUP BY clause; this is incompatible with sql_mode=only_full_group_by [1055]
โดย mindphp ศ 19 ก.ค. 2019 7:30 pm บอร์ด SQL - Database
0
7
ศ 19 ก.ค. 2019 7:30 pm โดย mindphp
วิธีการเขียน Select ข้อมูล ที่มีซ่ำกัน ไม่ให้ซ่ำกัน ใน phpbb
โดย Ittichai_chupol ศ 19 ก.ค. 2019 6:25 pm บอร์ด PHP Knowledge
0
6
ศ 19 ก.ค. 2019 6:25 pm โดย Ittichai_chupol
ข้อแตกต่างระหว่างสินค้าคงเหลือ กับ สินทรัพย์ถาวร
โดย EyePornnipa ศ 19 ก.ค. 2019 5:42 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
ศ 19 ก.ค. 2019 5:42 pm โดย EyePornnipa
บันทึกไฟล์แบบ CSV โดยใช้ฟังก์ชัน fputcsv
โดย Patipat ศ 19 ก.ค. 2019 5:01 pm บอร์ด PHP Knowledge
0
4
ศ 19 ก.ค. 2019 5:01 pm โดย Patipat
วิธีการลบช่อง Youtube ของตนเอง
โดย jamepiyawat ศ 19 ก.ค. 2019 4:50 pm บอร์ด Share Knowledge
0
14
ศ 19 ก.ค. 2019 4:50 pm โดย jamepiyawat
อยากทราบวิธีการ ใส่ URL ดึงรูปมาแสดงของ facebook เพือแสดงที่โพสต์ต้นทางที่แชร์
โดย Ittichai_chupol ศ 19 ก.ค. 2019 4:28 pm บอร์ด Programming - PHP
1
13
ศ 19 ก.ค. 2019 4:34 pm โดย mindphp
VDO สคริปการอัดวิดีโอ แนะนำและสอนการใช้งานโปรแกรมหายอดก่อนหักภาษีกรณีหัก ณ ที่จ่ายภาษี แบบออกให้
โดย jamepiyawat ศ 19 ก.ค. 2019 3:58 pm บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
5
ศ 19 ก.ค. 2019 7:11 pm โดย jamepiyawat
VDO สคริปการอัดวิดีโอ แนะนำและสอนการใช้งานโปรแกรมค้นหา Keyword Youtube
โดย jamepiyawat ศ 19 ก.ค. 2019 3:14 pm บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
6
ศ 19 ก.ค. 2019 6:40 pm โดย jamepiyawat
ข้อดีของระบบ OPEN ERP
โดย EyePornnipa ศ 19 ก.ค. 2019 2:30 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
3
30
ส 20 ก.ค. 2019 11:04 am โดย EyePornnipa
วิธีการเรียกใช้ฟิว name_th-TH และ name_en-GB ในตารางเดียวกันไม่ไห้ error
โดย jamepiyawat ศ 19 ก.ค. 2019 2:09 pm บอร์ด Joomla Developing Knowledge
0
10
ศ 19 ก.ค. 2019 2:09 pm โดย jamepiyawat
มีวิธีการทำให้ ชื่อสินค้าเปลี่ยนเป็น 2 ภาษาไหมครับ
โดย Patipat ศ 19 ก.ค. 2019 2:06 pm บอร์ด Joomla Development
2
12
ศ 19 ก.ค. 2019 2:47 pm โดย Patipat
ฟังก์ชัน call_user_func() - เป็นการเรียกใช้ฟังก์ชันที่ประกาศไว้ก่อนแล้ว
โดย Patipat ศ 19 ก.ค. 2019 1:47 pm บอร์ด PHP Knowledge
0
5
ศ 19 ก.ค. 2019 1:47 pm โดย Patipat
ฟังก์ชัน Error Log() คืออะไร
โดย Patipat ศ 19 ก.ค. 2019 11:38 am บอร์ด PHP Knowledge
0
4
ศ 19 ก.ค. 2019 11:38 am โดย Patipat