ในการกำหนดพื้นหลังเป็นรูปภาพเราสามารถกำหนดรูปแบบที่จะให้แสดงได้โดยใช้คำสั่ง background-repeat เพื่อที่จะจัดรูปแบบของพื้นหลังได้โดย background-repeat จะมี Values ที่มากมายให้ได้จัดรูปภาพพื้นหลังได้ตามความต้องการ เช่น repeat, repeat-x, repeat-y, no-repeat, space, round และ initial
ตัวอย่างกำหนดให้พื้นหลังยาวต่อๆกันลงมาด้านล่างดังรูป วิธีการทำ
1.สร้าง class ในไฟล์ css มา 1 class ดังโค้ด
โค้ด: เลือกทั้งหมด
.backgroundimg{
........คำสั่ง css..............
}
โค้ด: เลือกทั้งหมด
.backgroundimg{
background-image: url('../img/rtruyhjilk.png');
background-repeat: repeat-y;
}
- background-image กำหนดรูปภาพที่ต้องการจะใส่เป็นพื้นหลังโดยสามารถเขียนได้เป็น background-image: url('../img/rtruyhjilk.png');
background-repeat: repeat-y กำหนดให้รูปภาพแสดงให้ยาวลงตามเนื้อหาที่มีอยู่ในหน้าเว็บ
โค้ด: เลือกทั้งหมด
<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>
โค้ด: เลือกทั้งหมด
<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>
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css