#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. Materials
  3. Background ›
  4. css-ribbon d1

Background

css type * ribbon tape dark1

大きい画像は縮小及び一部表示にしています。画像をクリックすると背景が変わります。
縦・横リピート素材は見易いように固定表示しています。
Background-image *Reset*

IE,Edgeは固定表示した背景がスクロールでガタつくため、CSSページのみスムーズスクロールを無効にしています。(windows7以下はIEのどのバージョンでもガタつきます。詳しくはDesignTipsの『IE,Edgeのガタつき』をご覧下さい。)

size 18px~26px×150px

  • lace1-r.gif
  • lace1-bbl.gif
  • lace1-b.gif
  • lace2-r.gif
  • lace2-bbl.gif
  • lace2-b.gif
  • lace3-r.gif
  • lace3-bbl.gif
  • lace3-b.gif
  • lace8-r.gif
  • lace8-bbl.gif
  • lace8-b.gif
  • lace6-r.gif
  • lace6-bbl.gif
  • lace6-b.gif
  • lace5-r.gif
  • lace5-bbl.gif
  • lace5-b.gif
  • lace7-r.gif
  • lace7-bbl.gif
  • lace7-b.gif
  • lace4-r.gif
  • lace4-bbl.gif
  • lace4-b.gif

size 150px×18px~26px

  • lace-1-r.gif
  • lace-1-bbl.gif
  • lace-1-b.gif
  • lace-2-r.gif
  • lace-2-bbl.gif
  • lace-2-b.gif
  • lace-3-r.gif
  • lace-3-b.gif
  • lace-4-r.gif
  • lace-4-bbl.gif
  • lace-4-b.gif
  • lace-5-r.gif
  • lace-5-bbl.gif
  • lace-5-b.gif
  • lace-6-r.gif
  • lace-6-bbl.gif
  • lace-6-b.gif
  • lace-8-r.gif
  • lace-8-bbl.gif
  • lace-8-b.gif
  • lace-7-r.gif
  • lace-7-bbl.gif
  • lace-7-b.gif

Background-image *Reset*

background-repeat: repeat-x; /* x軸方向(横方向)に繰り返し表示します */
background-repeat: repeat-y; /* y軸方向(縦方向)に繰り返し表示します */


/* 横方向に繰り返し */
body{
   background-color: #ffffff;
   background-image: url(画像ファイル名);
   background-repeat: repeat-x;
}

/* 縦方向に繰り返し */
body{
   background-color: #ffffff;
   background-image: url(画像ファイル名);
   background-repeat: repeat-y;
}

Background › css type * ribbon 2