CSS background property.

ต้องการใส่รูปลงไปใน site's header / กำหนด bullets ใน list หรือ วางรูปภาพลงในตำแหน่งใดๆ ใน เวป และยังคงอยู่เมื่อ user ใช้ scroll down ... คุณสามารถทำได้ โดยใช้ CSS background property.

CSS มีความสามารถมากกว่า การเซ็ต ตำแหน่ง และการแสดงรูปภาพ เป็นการดีที่จะเรียนรู้ ในการใช้ CSS syntax สำหรับ background image ในที่นี้จะแนะนำให้คุณหัดทำ ลงใน Table

Background image basics

เริ่มต้นด้วยการกำหนด รูปลงใน CSS code :

h1 {background-image: url(underline.jpg);}

คุณสามารถที่จะใส่ URL แบบ local path หรือ URL เเบบเต็มๆๆ ก็ได้. ต่อไป คุณสามารถควบคุมได้ว่า รูป ควรจะ ทำซ้ำตามแนวตั้ง หรือแนวนอน โดยใช้ geometry ดังนี้ "repeat-x" and "repeat-y", ดูตัวอย่างด้านล่างนี้

h2 {
background-image: url(image.jpg);
background-repeat: repeat-x; }
h3 {
background-image: url(image.jpg);
background-repeat: repeat-y; }

ในการกำหนด ทั้ง แกน x และ แกน y เพื่อให้แสดงรูปซ้ำ ทั้งสองด้าน เราจะใช้ parameter "repeat" :

body {
background-image: url(image.jpg);
background-repeat: repeat; }
------------------------------------------
#main {
background-image: url(image.jpg);
background-repeat: no-repeat; }

Fixed background images

มันเป็นไปได้ว่าคุณต้องการรูป background ที่จะแสดงแบบ fixed ตำแหน่งบน screen แม้นว่า user จะ scroll up หรือ down ที่หน้าเวปเพจ รูป background ก็จะยังคงอยู่กับที่ไม่เคลื่อนตาม Scroll ดังตัวอย่าง :

#main {
background-image: url(image.jpg);
background-attachment: fixed;
}

การกำหนดตำแหน่งให้กับรูป background โดยใช้ "background-position: Xpx Ypx;" ดังตัวอย่างด้านล่าง :

#pixelplaced {
background-image: url(image.jpg);
background-position: 25px 10px;
}

#header {
background-image: url(image.jpg);
background-position: 20% 10%;
}

#footer {
background-image: url(image.jpg);
background-position: bottom right;
}

ในตัวอย่างด้านบน รูปภาพถูกกำหนดให้ อยู่ที่ 25 pixels จากทางซ้ายและ 10 pixels จากด้านบน ตัวอย่างสุดท้ายเป็นการใช้ keywords ระบุตำแหน่ง ซึ่งมีดังนี้ : top, right, bottom, left, and center.

Bullet images in CSS

One useful purpose for the background property is to replace ordinary bullets in lists with your own graphics. To do so, you start by redefining the

tag, which controls unordered lists (those using bullets, not numbers):

ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

This removes the bullet markers as well as any indentations that a browser might apply.

Next, let's specify the bullet graphics for each list item -- the
• tag:
  
  li {
  background: url(image.gif);
  background-position: left center;
  background-repeat: no-repeat
  }
  
  You can shorten this collection of background properties - as well as any of those in earlier code examples above - with a single background declaration:
  
  li {background: url(image.gif) left center no-repeat;
  
  In this example the browser will place the image at the left edge of the list item. To position the bullet more accurately, you can use pixel values instead of these kinds of positioning keywords.
  
  However, at this point, the text for each
• tag will appear directly atop the bullet. To pad this out a little, just insert a padding value to the left side of the
• style. If the graphic is 15 pixels wide, for example, you might put 20 pixels of padding on the left-hand side. Similarly, you could add to the top or bottom margins if the list items appear stacked too tightly together. To sum up, a list item that uses a custom graphic with extra padding and extra spacing in the top margin might look like the following example:
  
  li {
  background: url(image.gif) left center no-repeat;
  padding-left: 20px;
  margin-top: 5px;
  }