ตั้งพื้นหลังสีพื้น สร้างพื้นหลังสีเหลือบ สร้างพื้นหลังที่เปลี่ยนแปลงได้
ปกติจะอยู่ด้านบนของเอกสาร พิมพ์ background-color: กลางวงเล็บ body เท่านี้ก็ได้โค้ด "body" ตามที่เห็นด้านล่าง  body {     background-color:  }   ในกรณีนี้ ต้องสะกดว่า "color" เท่านั้น ห้ามพิมพ์ว่า "colour" โดยพิมพ์หมายเลขโค้ดของสีที่เลือก ตามด้วย semicolon (;) ข้าง "background-color:" เช่น ถ้าจะตั้งพื้นหลังสีชมพู ให้พิมพ์ว่า  body {     background-color: #d24dff; } ถึงตอนนี้ header ของเอกสาร HTML ก็จะออกมาประมาณนี้  <!DOCTYPE html> <html> <head> <style> body { background-color: #d24dff } </style> </head> </html> พอตั้งค่า body element แล้ว ให้ใช้ "background-color" กำหนดสีพื้นหลังของ element อื่นๆ ด้วย เช่น header, paragraph และอื่นๆ เช่น ใส่สีพื้นหลังให้ header หลัก (<h1>) หรือ paragraph (<p>) โค้ดที่ได้ก็จะออกมาประมาณนี้  <!DOCTYPE html> <html> <head> <style> body {     background-color: #93B874; } h1 {     background-color: #00b33c; } p {     background-color: #FFFFFF); } </style> </head> <body> <h1>Header with Green Background</h1> <p>Paragraph with white background</p> </body> </html> ปกติจะอยู่ทางด้านบนของเอกสาร เวลาจะสร้างสีเหลือบ แปลว่าต้องใช้ข้อมูล 2 ส่วน คือจุดเริ่มต้น/ทำมุม และสีที่จะเหลือบเชื่อมต่อกัน คุณเลือกได้หลายสีที่อยากให้เหลือบไปมา และกำหนดทิศทางหรือมุมการเหลือบได้  background: linear-gradient(direction/angle, color1, color2, color3, etc.); ถ้าไม่กำหนดทิศทางให้สีเหลือบ ก็จะเป็นการเหลือบจากบนลงล่าง วิธีกำหนดสีเหลือบก็คือใช้โค้ดต่อไปนี้ โดยใส่ไว้กลางแท็ก <style></style>  html {     min-height: 100%;  } body {     background: -webkit-linear-gradient(#93B874, #C9DCB9);      background: -o-linear-gradient(#93B874, #C9DCB9);      background: -moz-linear-gradient(#93B874, #C9DCB9);      background: linear-gradient(#93B874, #C9DCB9);      background-color: #93B874;  }   แต่ละเบราว์เซอร์ก็มีวิธีกำหนดและใช้งานฟังก์ชั่นสีเหลือบนี้แตกต่างกันไป เพราะงั้นก็ต้องมีโค้ดหลายๆ เวอร์ชั่น ถ้าอยากได้สีเหลือบทิศทางอื่น ไม่เหลือบลงมาตรงๆ ทื่อๆ ก็ให้กำหนดทิศทางการเหลือบ เพื่อเปลี่ยนลักษณะการเหลือบของสี โดยพิมพ์โค้ดต่อไปนี้กลางแท็ก <style></style>  html {     min-height: 100%; }  body {     background: -webkit-linear-gradient(left, #93B874, #C9DCB9);      background: -o-linear-gradient(right, #93B874, #C9DCB9);      background: -moz-linear-gradient(right, #93B874, #C9DCB9);      background: linear-gradient(to right, #93B874, #C9DCB9);      background-color: #93B874;  }   ลองใช้แท็ก "left" (ซ้าย) และ "right" (ขวา) ดู เพื่อลองเหลือบในทิศทางต่างๆ จนได้สีเหลือบแบบที่ต้องการ คุณตั้งค่าสีเหลือบได้อีกมากมายหลายแบบ  เช่น ทำสีเหลือบได้มากกว่า 2 สีขึ้นไป แถมยังกำหนดเปอร์เซ็นต์ของแต่ละสีได้ด้วย จะได้เลือกว่าอยากให้สีไหนกินพื้นที่มากกว่า ตัวอย่างสีเหลือบแบบที่ว่าก็คือ   background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);    ทำสีโปร่งใส หรือทำให้สีจางลง โดยใช้สีเดียวกัน แต่เหลือบจากสีเข้มปกติไปจนถึงไม่มีสี ต้องใช้ฟังก์ชั่น rgba() กำหนดสี ค่าด้านท้ายจะเป็นตัวกำหนดความโปร่งใส คือ 0 แทนสีทึบ และ 1 แทนโปร่งใส   background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1)); โค้ดกำหนดสีเหลือบของพื้นหลังเว็บไซต์ที่ได้ จะออกมาหน้าตาประมาณนี้  <!DOCTYPE html> <html> <head> <style> html {     min-height: 100%; }   body {     background: -webkit-linear-gradient(left, #93B874, #C9DCB9);      background: -o-linear-gradient(right, #93B874, #C9DCB9);     background: -moz-linear-gradient(right, #93B874, #C9DCB9);      background: linear-gradient(to right, #93B874, #C9DCB9);      background-color: #93B874;  } </style> </head> <body> </body> </html> ปกติจะอยู่ทางด้านบนของเอกสาร พิมพ์โค้ดต่อไปนี้ในที่ว่างล่างวงเล็บเปิด "body {" แต่เหนือวงเล็บปิด      -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite;   ข้อความบรรทัดบนสุดนั้นสำหรับเบราว์เซอร์ตระกูล Chromium ส่วนข้อความบรรทัดล่างสุดสำหรับเบราว์เซอร์อื่นๆ คราวนี้เราจะมาใช้กฎ @keyframes กำหนดสีพื้นหลังให้เปลี่ยนแบบวนไป รวมถึงกำหนดว่าแต่ละสีจะอยู่นานแค่ไหน ย้ำว่าต้องใช้ entries แยกกันสำหรับแต่ละเบราว์เซอร์ ให้ใส่โค้ดต่อไปนี้ล่างวงเล็บปิดของ "body"  @-webkit-keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} } @keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} }    จะเห็นว่า 2 กฎนี้ (@-webkit-keyframes กับ @keyframes เป็นสีพื้นหลังเดียวกันและเปอร์เซ็นต์เท่ากัน เพราะงั้นต้องคงค่านี้ไว้ จะได้เหมือนกันในทุกเบราว์เซอร์ เปอร์เซ็นต์ (เช่น 0%, 25% เป็นต้น) ก็คือความยาวของแอนิเมชั่นโดยรวม (60s) พอหน้าเว็บโหลดขึ้นมา สีของพื้นหลังจะอยู่ที่ 0% (#33FFF3) พอแอนิเมชั่นเล่นไปได้ 25% ของ 60 วินาที พื้นหลังก็จะเปลี่ยนเป็น #7821F แบบนี้ไปเรื่อยๆ คุณปรับระยะเวลากับสีได้ตามต้องการเลย โค้ดสำหรับทำสีพื้นหลังแบบเปลี่ยนสีได้จะออกมาหน้าตาประมาณนี้  <!DOCTYPE html> <html> <head> <style> body {     -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite; } @-webkit-keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} } @keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} }    </style> </head> <body> </body> </html>
หา "html" header ในเอกสาร. ใส่คุณสมบัติ "background-color" ในส่วน "body". กำหนดสีพื้นหลังที่ต้องการในคุณสมบัติ "background-color". ตรวจทานข้อมูล "style". ใช้ "background-color" เพื่อใส่สีพื้นหลังให้ element อื่นๆ. หา "html" header ของเอกสาร. รู้จัก syntax พื้นฐานของขั้นตอนนี้. ทำสีเหลือบแนวตั้ง. ทำสีเหลือบในทิศทางอื่น. ใช้คุณสมบัติหรือ properties อื่นปรับแต่งสีเหลือบ. ตรวจทานโค้ดทั้งหมด. หา "html" header ของเอกสาร. ใส่คุณสมบัติ animation ให้ "body" element. ใส่สีให้แอนิเมชั่น. ตรวจทานโค้ด.
https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML
Setting a Solid Background Color Creating a Gradient Background Creating a Changing Background