カスタマイズ方法|背景に画像を指定

Loading

スポンサードリンク

各要素に background-image 追加して下さい。

壁紙など

body {
  font-size: 0.85em;
  text-align: center;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  padding: 0;
  margin: 0;
  background-image: url(***);
}

/*---------------------------------*/
background-image: url(***) no-repeat 0 0; /* 配置指定 */
(background-image: url(***) no-repeat left top;)

background-image: url(***) repeat-x 0 0; /* 横方向へ繰り返し */
(background-image: url(***) repeat-x  left top;)

background-image: url(***) repeat-y 0 0; /* 縦方向へ繰り返し */
(background-image: url(***) repeat-y  left top;)

その他の指定についてはたったこれだけタグ講座|背景に関する指定を参照して下さい。

ヘッダー画像

ヘッダー部分に画像を使用する際は、画像に合わせて高さを指定しましょう。その際余白も考慮の事。例えば高さが200pxの画像の場合。

#header {
  padding: 20px 20px 10px;
  height: 170px; /* 上下で30pxの余白を差し引く */
  background-image: url(***) no-repeat 0 0;
}

配置を指定する場合。例えば高さは200pxで幅が400pxの画像を右に配置の場合

#header {
  padding: 20px 20px 10px;
  height: 170px; /* 上下で30pxの余白を差し引く */
  background-image: url(***) no-repeat 100% 0;(right top)
}

スポンサードリンク