各要素に 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;)
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;
- background-image: url(***) no-repeat 0 0;
- }
#header {
padding: 20px 20px 10px;
height: 170px; /* 上下で30pxの余白を差し引く */
background-image: url(***) no-repeat 0 0;
}
配置を指定する場合。例えば高さは200pxで幅が400pxの画像を右に配置の場合
- #header {
- padding: 20px 20px 10px;
- height: 170px;
- background-image: url(***) no-repeat 100% 0;(right top)
- }
#header {
padding: 20px 20px 10px;
height: 170px; /* 上下で30pxの余白を差し引く */
background-image: url(***) no-repeat 100% 0;(right top)
}