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

web material *Essence

  1. Home
  2. Materials
  3. Background ›
  4. css-other2

Background

css type * other 2

まだカテゴリーが分け難い等の素材です。(増えたら分けます。)
大きい画像は縮小及び一部表示にしています。画像をクリックすると背景が変わります。
Background-image *Reset*

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

size 775px×105px

  • line1.gif
  • line2.gif
  • line3.gif
  • line4.gif
  • line5.gif

size 591px×88px

  • dot-11.gif
  • dot-12.gif
  • dot-13.gif
  • dot-21.gif
  • dot-22.gif
  • dot-23.gif

size 127px×592px

  • line-1.gif
  • line-2.gif
  • line-3.gif
  • line-4.gif
  • line-5.gif

size 130px×592px

  • dot-b1.gif
  • dot-b2.gif
  • dot-b3.gif
  • dot-b4.gif
  • dot-b5.gif
  • dot-b6.gif

Background-image *Reset*

body{
   background-color: 背景色名;
   background-image: url(画像ファイル名);
   background-position: left top;
   background-repeat: no-repeat;
   background-attachment: fixed; /* 背景を固定する場合 */
}
背景に画像を使った場合、通常は全体に繰り返し表示されますが、background-repeatプロパティを使うと、画像の繰り返し方法を設定することが出来ます。
repeat-x を指定すれば横方向に、repeat-y を指定すれば縦方向に、no-repeat を指定すれば繰り返さず、一つだけ画像を配置できます。
背景画像の位置は、background-position: 横方向 縦方向; で決められます。
指定出来るのは、
横方向 left/center/right/in(インチ)/pt(ポイント)/px(ピクセル)等、
縦方向 top/center/bottom/in(インチ)/pt(ポイント)/px(ピクセル)等、です。

Background › css type * other 2