ปกติแล้วเวลาที่เราเลื่อนสกอลบาร์แล้วพื้นหลังมักจะเลื่อนตามไปด้วย แต่เราสามารถล็อคหรือตรึงพื้นหลังให้ไม่ให้เลื่อนตามสกอลบาร์ได้ โดยที่จะใช้ background-attachment ซึ่งค่าที่ใช้กำหนดนั้นจะมีอยู่ 2 แบบ คือ fixed และ scrooll ซื่งทั้งสองแบบนี้จะมีการทำงานที่ต่างกัน คือ แบบ fixed จะตรึงภาพไว้กับที่หากเราเลื่อนสกอลบาร์ภาพก็จะไม่เลื่อนตามไปด้วย อีกแบบคือ แบบ scoll การทำงานคือภาพจะถูกเลื่อนไปตามสกอบาร์ คำสั่งที่ใช้ในการตรึงภาพพื้นหลังคือ background-attachment: fixed;
ตัวอย่างโค้ดที่ใช้เขียน
โค้ด: เลือกทั้งหมด
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
body { background-image : url('orange.jpg') ; //ที่อยู่ของรูปภาพ
background-repeat : no-repeat; //กำหนดให้แสดงเพียงภาพเดียว
background-position : top left; //จัดตำแหน่งของรูปภาพ
background-attachment: fixed; //กำหนดตรึงภาพ เพื่อไม่ให้ภาพเลื่อนตามสกอลบาร์
}
</style>
<body>
<h2>ข้อความที่ 1</h2>
<h2>ข้อความที่ 2</h2>
<h2>ข้อความที่ 3</h2>
<h2>ข้อความที่ 4</h2>
<h2>ข้อความที่ 5</h2>
<h2>ข้อความที่ 6</h2>
<h2>ข้อความที่ 7</h2>
<h2>ข้อความที่ 8</h2>
<h2>ข้อความที่ 9</h2>
<h2>ข้อความที่ 10</h2>
<h2>ข้อความที่ 11</h2>
<h2>ข้อความที่ 12</h2>
<h2>ข้อความที่ 13</h2>
<h2>ข้อความที่ 14</h2>
<h2>ข้อความที่ 15</h2>
<h2>ข้อความที่ 16</h2>
<h2>ข้อความที่ 17</h2>
<h2>ข้อความที่ 18</h2>
<h2>ข้อความที่ 19</h2>
<h2>ข้อความที่ 20</h2>
</body>
</html>
ก่อนเลื่อนสกอบาร์ หลังจากมีการเลื่อนสกอบาร์ บทความที่เกี่ยวข้อง
บทที่ 3 CSS3 Backgrounds สร้างพื้นหลังบนหน้าเว็บ