การใช้งาน background-repeat กำหนดรูปภาพพื้นหลัง

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การใช้งาน background-repeat กำหนดรูปภาพพื้นหลัง

การใช้งาน background-repeat กำหนดรูปภาพพื้นหลัง

โดย Parichat » 29/06/2018 11:27 am

การใช้งาน background-repeat กำหนดรูปภาพพื้นหลัง

ในการกำหนดพื้นหลังเป็นรูปภาพเราสามารถกำหนดรูปแบบที่จะให้แสดงได้โดยใช้คำสั่ง background-repeat เพื่อที่จะจัดรูปแบบของพื้นหลังได้โดย background-repeat จะมี Values ที่มากมายให้ได้จัดรูปภาพพื้นหลังได้ตามความต้องการ เช่น repeat, repeat-x, repeat-y, no-repeat, space, round และ initial

ตัวอย่างกำหนดให้พื้นหลังยาวต่อๆกันลงมาด้านล่างดังรูป
s1.jpeg
s1.jpeg (58.62 KiB) Viewed 1795 times
วิธีการทำ
1.สร้าง class ในไฟล์ css มา 1 class ดังโค้ด

โค้ด: เลือกทั้งหมด

.backgroundimg{
                ........คำสั่ง css..............
}
2.เพิ่มคำสั่งลงใน class ที่สร้างไว้ดังโค้ด

โค้ด: เลือกทั้งหมด

.backgroundimg{
                background-image: url('../img/rtruyhjilk.png');
                background-repeat: repeat-y;
}
คำอธิบาย
  • background-image กำหนดรูปภาพที่ต้องการจะใส่เป็นพื้นหลังโดยสามารถเขียนได้เป็น background-image: url('../img/rtruyhjilk.png');
    background-repeat: repeat-y กำหนดให้รูปภาพแสดงให้ยาวลงตามเนื้อหาที่มีอยู่ในหน้าเว็บ
3.จากนั้นเอาชื่อ class ไปใส่ใน class ในแท็กที่ต้องการจะใส่พื้นหลังดังโค้ด

โค้ด: เลือกทั้งหมด

<div class="col-12 backgroundimg">
	<img src="img/animalia-3208412_960_720.jpg" alt="" width="500" class="center"/><br>
	<img src="img/cat-2083492_960_720.jpg" alt="" width="500"/><br>
	<img src="img/cat-3217406_960_720.jpg" alt="" width="500"/><br>
	<img src="img/cute-3206543_960_720.jpg" alt="" width="500"/><br>
</div>
4.รวมโค้ด

โค้ด: เลือกทั้งหมด

<html>
        <head>
                <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        </head>
        <body>
                <div class="container">
                        <div class="col-12 backgroundimg">
                                <img src="img/animalia-3208412_960_720.jpg" alt="" width="500" class="center"/><br>
                                <img src="img/cat-2083492_960_720.jpg" alt="" width="500"/><br>
                                <img src="img/cat-3217406_960_720.jpg" alt="" width="500"/><br>
                                <img src="img/cute-3206543_960_720.jpg" alt="" width="500"/><br>
                        </div>
                </div>
        </body>
</html>
นอกจากนี้ก็ยังมีค่าต่างๆที่จะกำหนดให้แก่ background-repeat ได้ตามความต้องการไม่ว่าจะเป็น repeat ก็คือให้แสดงพื้นหลังซ้ำๆกันทั้งหน้า, repeat-x กำหนดให้แสดงพื้นหลังต่อๆกันในแนวนอน, repeat-y กำหนดพื้นหลังให้แสดงในแนวตั้ง, no-repeat กำหนดให้แสดงพื้นหลังแค่รูปเดียวไม่ต้องเอารูปมาต่อกัน, space กำหนดให้พื้นหลังแสดงต่อๆกันแต่จะมีช่องว่างระหว่างรูป, round กำหนดให้รูปภาพเรียงติดกันและขยายให้ใหญ่ขึ้น และ initial กำหนดให้รูปภาพเรียงติดกันและรูปภาพจะเล็กลงเท่ากับขนาดจริง

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

ข้างบน