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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 2134
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้งาน 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) เปิดดู 189 ครั้ง


วิธีการทำ
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
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน