CSS - พื้นหลัง

บทนี้สอนวิธีตั้งค่าพื้นหลังขององค์ประกอบ HTML ต่างๆ คุณสามารถตั้งค่าคุณสมบัติพื้นหลังขององค์ประกอบต่อไปนี้ -

background-color คุณสมบัติถูกใช้เพื่อตั้งค่าสีพื้นหลังขององค์ประกอบ
background-image คุณสมบัติถูกใช้เพื่อตั้งค่าภาพพื้นหลังขององค์ประกอบ
background-repeat คุณสมบัติถูกใช้เพื่อควบคุมการทำซ้ำของรูปภาพในพื้นหลัง
background-position คุณสมบัติถูกใช้เพื่อควบคุมตำแหน่งของรูปภาพในพื้นหลัง
background-attachment คุณสมบัติถูกใช้เพื่อควบคุมการเลื่อนของรูปภาพในพื้นหลัง
background คุณสมบัติถูกใช้เป็นชวเลขเพื่อระบุคุณสมบัติพื้นหลังอื่น ๆ

ตั้งค่าสีพื้นหลัง

ต่อไปนี้เป็นตัวอย่างที่สาธิตวิธีการตั้งค่าสีพื้นหลังสำหรับองค์ประกอบ

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าภาพพื้นหลัง

เราสามารถตั้งค่าภาพพื้นหลังได้โดยเรียกภาพที่เก็บไว้ในเครื่องดังภาพด้านล่าง -

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ทำซ้ำภาพพื้นหลัง

ตัวอย่างต่อไปนี้สาธิตวิธีการแสดงภาพพื้นหลังซ้ำหากภาพมีขนาดเล็ก คุณสามารถใช้ค่าไม่ซ้ำสำหรับคุณสมบัติพื้นหลังซ้ำได้หากคุณไม่ต้องการทำซ้ำรูปภาพในกรณีนี้รูปภาพจะแสดงเพียงครั้งเดียว

โดยค่าเริ่มต้นคุณสมบัติการทำซ้ำพื้นหลังจะมีค่าซ้ำ

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างต่อไปนี้ซึ่งสาธิตวิธีการทำซ้ำภาพพื้นหลังในแนวตั้ง

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างต่อไปนี้สาธิตวิธีการทำซ้ำภาพพื้นหลังในแนวนอน

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าตำแหน่งภาพพื้นหลัง

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าตำแหน่งภาพพื้นหลัง 100 พิกเซลจากด้านซ้าย

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าตำแหน่งภาพพื้นหลัง 100 พิกเซลจากด้านซ้ายและ 200 พิกเซลจากด้านบน

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าไฟล์แนบพื้นหลัง

ไฟล์แนบพื้นหลังกำหนดว่าภาพพื้นหลังได้รับการแก้ไขหรือเลื่อนไปพร้อมกับส่วนที่เหลือของหน้า

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าภาพพื้นหลังคงที่

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าภาพพื้นหลังแบบเลื่อน

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ทรัพย์สินชวเลข

คุณสามารถใช้คุณสมบัติพื้นหลังเพื่อตั้งค่าคุณสมบัติพื้นหลังทั้งหมดพร้อมกัน ตัวอย่างเช่น -

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>