เกี่ยวกับการปรับแต่งพื้นหลัง เราจะใช้ Style แบบ ต่างๆ ของ CSS จากเรื่องนี้ How To Add CSS มาดูกัน
CSS background-color สีของพื้นหลัง และสีพื้นหลังของข้อความ
แบบ Inline CSS [background-color: color]
<!doctype html>
<html>
<head><link rel="stylesheet" type="text/css" href="styles.css">
<style>
div{
background-color: green;
}
</style></head>
<body style="background-color: lightblue;">
<h1>Hello World!</h1>
<div>Hello Worid!!</div>
</body></html>
CSS background-image พื้นหลังรูปภาพ
แบบ External CSS [background-image: url(………)]
file.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<div>Hello Worid!!</div>
</body>
</html>styles.css
body {
background-image: url(https://www.city-hotel-reutlingen.de/wp-content/uploads/sites/2/layerslider/Autumn-Experiment/autumn-bg.jpg);
}
CSS background-repeat การวนลูปพื้นหลัง
คือการเรียงรูปภาพไปแนวแกน X แนวนอน หรือ Y แนวตั้ง [background-repeat: repeat-x;] สามารถเป็นได้ทั้ง repeat-x, repeat-y
file.html
<link rel="stylesheet" type="text/css" href="styles.css">style.css
body {
background-image: url(http://3.bp.blogspot.com/-Gov9zyEsh2E/TmBVj59VL3I/AAAAAAAAA4M/xe8KHIUkf08/s1600/blackhorse.jpg);
background-repeat: repeat-x;
}
CSS background-repeat: no-repeat พื้นหลังไม่วนลูป จะมาแค่ภาพเดียว
ทำแบบ Internal CSS
<!doctype html>
<html>
<head>
<style>
body {
background-image: url(http://3.bp.blogspot.com/-Gov9zyEsh2E/TmBVj59VL3I/AAAAAAAAA4M/xe8KHIUkf08/s1600/blackhorse.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<div>Hello Worid!!</div>
</body>
</html>
CSS background-position กำหนดตำแหน่งของพื้นหลัง
[background-position: center top;]
<!doctype html>
<html>
<head>
<style>
body {
background-image: url(http://3.bp.blogspot.com/-Gov9zyEsh2E/TmBVj59VL3I/AAAAAAAAA4M/xe8KHIUkf08/s1600/blackhorse.jpg);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<div>Hello Worid!!</div>
</body>
</html>
CSS background-attachment คือ กำหนดภาพอยู่นิ่งๆ ไม่เคลื่อนที่
[background-attachment: fixed;] เช่น fixed : ภาพนิ่ง , scroll : เลื่อนตามภาพ
<!doctype html>
<html>
<head>
<style>
body {
background-image: url(http://3.bp.blogspot.com/-Gov9zyEsh2E/TmBVj59VL3I/AAAAAAAAA4M/xe8KHIUkf08/s1600/blackhorse.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<div>Hello Worid!!</div>
</body>
</html>CSS background — Shorthand property
ทั้งหมดทั้งมวลที่ทำมา สามารถเอามาเขียนรวมกันได้ดังนี้ ไม่ว่าจะเป็น
background-color : กำหนดสี
background-image : กำหนดรูปภาพ
background-repeat : กำหนดการวนลูป
background-attachment : กำหนดการเลื่อนของภาพ
background-position : กำหนดตำแหน่งภาพ
<!doctype html>
<html>
<head><style>
body {
background: #ffffff url("https://images.unsplash.com/photo-1487953921478-8d8ca17f072d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80") no-repeat right top fixed;}
</style></head>
<body>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<div>Hello World!!</div>
</body>
</html>
เรามองว่าส่วนหลักๆ ที่สำคัญในเรื่องนี้คือ ส่วนที่มากำหนดการวนลูป การเลื่อนของภาพ ตำแหน่งภาพ เพราะเรื่องนี้มันต่างออกมาจาก เรื่องของ background-color ได้พูดถึงมาแล้ว จบแล้วววว!!
ศึกษาจากเว็บไซต์นี้ https://www.w3schools.com/css/css_colors.asp
