การกำหนดสีให้กับพื้นหลัง หรือรูปพื้นหลังของเว็บไซต์
Property หลักๆ ของพื้นหลังมีดังนี้
background ใช้กำหนดคุณสมบัติรวมได้ทั้งหมด ในกรณีที่ต้องการเขียนคำสั่งแบบสั้น
background-color ใช้ใส่สีให้พื้นหลัง โดยค่าจะเป็น ชื่อของสี เช่น red, blue, green หรือเป็นค่าเลขฐานสิบหก เช่น #FF0000
background-image ใช้ใส่รูปให้กับพื้นหลัง โดยค่าเป็น url("ที่อยู่ของรูปภาพ") โดยค่าเริ่มต้นจะเป็น none
background-repeat ใช้กับ background-image เป็นการกำหนดว่าจะให้รูปของพื้นหลังแสดงซ้ำหรือไม่ โดยค่าจะมี
repeat คือให้แสดงซ้ำ (ค่าปกติจะเป็นค่านี้)
no-repeat คือไม่แสดงซ้ำ
repeat-x คือแสดงซ้ำในแนวนอน
repeat-y คือแสดงซ้ำในแนวตั้ง
background-attachment ใช้กับ background-image โดยค่าจะมี
scroll คือรูปจะเลื่อนถ้าเลื่อนหน้าเว็บลง (ค่าปกติจะเป็นค่านี้)
fixed คือรูปของพื้นหลังจะอยู่กับที่ไม่เลื่อนไปไหน
background-position กำหนดตำแหน่งของรูปภาพพื้นหลัง ถ้าใส่เป็นค่าตัวเลข จะเป็นการกำหนดจุดเริ่มต้นของการใส่สี หรือรูปพื้นหลัง เช่น ถ้ากำหนดเป็น 10px 20px จะเป็นการเริ่มตำแหน่งของพื้นหลัง x=10px, y=20px หรือจะใส่เป็นการตั้ง alignment เช่น right top, center bottom
ตัวอย่างการใส่ค่า Property
background-color: #d4ddb0;
background-image: url(background.jpg);
background-position: 50px 100px;
background-position: center top;
background-repeat: no-repeat;
จากค่าทั้งหมดด้านบน สามารถนำมาเขียนค่า background ที่อยู่บนสุดอันเดียว แล้วแสดงผลเหมือนกันได้เลย เช่น
background: #d4ddb0 url(background.jpg) no-repeat bottom;
#d4ddb0 คือสีที่ใช้เป็นพื้นหลัง
url(background.jpg) คือรูปภาพที่ใช้เป็นพื้นหลัง
no-repeat คือการสั่งห้ามทำซ้ำ
bottom คือการวางตำแหน่งให้รูปภาพพื้นหลังอยู่ bottom ตำแหน่งนี้จะอยู่ด้านล่างและจัดกลาง แต่ถ้าจะให้รูปภาพอยู่มุมขวาล่าง เราก็เพิ่ม right เข้าไปหลัง bottom เช่น background: #d4ddb0 url(background.jpg) no-repeat bottom right;
ตัวอย่างการเขียน Class เพื่อควบคุมการแสดงผลของพื้นหลัง
.maincoll {
width: 800px; position: relative; float: none;
margin: 0px auto 0px; border:0px; height: 150px;
background: #d4ddb0 url(background.jpg) bottom right no-repeat;
}
วิธีทำภาพพื้นหลังเล็กๆ ให้อยู่กับที่ ร่วมกับสีพื้นหลังทั้งหน้า ทำได้ดังนี้
background: #fff9fb url(ชื่อและที่อยู่ไฟล์รูปภาพ) no-repeat fixed right bottom;
หมายความว่า
background: [สีพื้น] [url ของรูปที่จะอยู่กับที่] [ให้ใช้รูปเดียว] [ให้รูปอยู่กับที่] [ให้รูปอยู่ทางขวา] [ให้รูปอยู่ล่างสุดของหน้าเว็บ]
ตรง right bottom สามารถกำหนดได้หลายค่า ดังนี้
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y% ถ้าใส่เป็น 0% 0% คือ top left ถ้าใส่ 100% 100% คือ right bottom
xpos ypos คือตำแหน่งของรูป เช่น 15px 20px
ไม่มีความคิดเห็น:
แสดงความคิดเห็น