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

web material *Essence

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

Background

css type * ribbon tape dark2

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

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

size 36px×180px

  • laceb-tb.gif
  • laceb-tr.gif
  • laceb-tv.gif
  • laceb-tg.gif
  • laceb-tbl.gif

size 32px×187px

  • lace2b-tb.gif
  • lace2b-tr.gif
  • lace2b-tv.gif
  • lace2b-tg.gif
  • lace2b-tbl.gif

size 12px×160px

  • lace-tblbtt.gif
  • lace-trbtt.gif
  • lace-tvbtt.gif
  • lace-tgbtt.gif
  • lace-tbbtt.gif
  • lace-tblb1tt.gif
  • lace-trb1tt.gif
  • lace-tvb1tt.gif
  • lace-tgb1tt.gif
  • lace-tbb1tt.gif

size 180px×36px

  • laceb-b.gif
  • laceb-r.gif
  • laceb-v.gif
  • laceb-g.gif
  • laceb-bl.gif

size 187px×32px

  • lace2b-b.gif
  • lace2b-r.gif
  • lace2b-v.gif
  • lace2b-g.gif
  • lace2b-bl.gif

size 160px×12px

  • lace-blbtt.gif
  • lace-rbtt.gif
  • lace-vbtt.gif
  • lace-gbtt.gif
  • lace-bbtt.gif
  • lace-blb1tt.gif
  • lace-rb1tt.gif
  • lace-vb1tt.gif
  • lace-gb1tt.gif
  • lace-bb1tt.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 w2