HTML - พื้นหลัง

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

พื้นหลัง HTML พร้อมสี
พื้นหลัง HTML พร้อมรูปภาพ

ตอนนี้เรามาดูทั้งสองแนวทางทีละวิธีโดยใช้ตัวอย่างที่เหมาะสม

พื้นหลัง Html พร้อมสี

bgcolor แอตทริบิวต์ใช้เพื่อควบคุมพื้นหลังขององค์ประกอบ HTML โดยเฉพาะเนื้อหน้าและพื้นหลังตาราง

Note- แอตทริบิวต์bgcolorเลิกใช้งานใน HTML5 อย่าใช้แอตทริบิวต์นี้

ต่อไปนี้เป็นไวยากรณ์ที่จะใช้แอตทริบิวต์ bgcolor กับแท็ก HTML ใด ๆ

<tagname bgcolor = "color_value"...>

color_value นี้สามารถกำหนดได้ในรูปแบบใด ๆ ต่อไปนี้ -

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

ตัวอย่าง

ตัวอย่างการตั้งค่าพื้นหลังของแท็ก HTML มีดังนี้

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

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

พื้นหลัง Html พร้อมรูปภาพ

backgroundนอกจากนี้ยังสามารถใช้แอตทริบิวต์เพื่อควบคุมพื้นหลังขององค์ประกอบ HTML โดยเฉพาะเนื้อหน้าและพื้นหลังตาราง คุณสามารถระบุรูปภาพเพื่อตั้งค่าพื้นหลังของหน้า HTML หรือตารางของคุณ

Note- แอตทริบิวต์พื้นหลังเลิกใช้แล้วใน HTML5 อย่าใช้แอตทริบิวต์นี้

ต่อไปนี้เป็นไวยากรณ์ที่จะใช้แอตทริบิวต์พื้นหลังกับแท็ก HTML ใด ๆ

Note- แอตทริบิวต์พื้นหลังเลิกใช้แล้วและขอแนะนำให้ใช้สไตล์ชีตสำหรับการตั้งค่าพื้นหลัง

<tagname background = "Image URL"...>

รูปแบบภาพที่ใช้บ่อยที่สุดคือภาพ JPEG, GIF และ PNG

ตัวอย่าง

ตัวอย่างการตั้งค่าภาพพื้นหลังของตารางมีดังนี้

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

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

พื้นหลังที่มีลวดลายและโปร่งใส

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

ขอแนะนำว่าในขณะที่สร้างรูปแบบหรือรูปภาพ GIF หรือ PNG แบบโปร่งใสให้ใช้ขนาดที่เล็กที่สุดเท่าที่จะทำได้แม้จะเล็กถึง 1x1 เพื่อหลีกเลี่ยงการโหลดช้า

ตัวอย่าง

ตัวอย่างการตั้งค่ารูปแบบพื้นหลังของตารางมีดังนี้

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

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