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

Loading

スポンサードリンク

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

壁紙など

  1. body {  
  2.   font-size0.85em;  
  3.   text-aligncenter;  
  4.   font-family"ヒラギノ角ゴ Pro W3""Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック""MS PGothic"sans-serif;  
  5.   padding0;  
  6.   margin0;  
  7.   background-imageurl(***);  
  8. }  
  9.   
  10. /*---------------------------------*/  
  11. background-imageurl(***) no-repeat 0 0/* 配置指定 */  
  12. (background-imageurl(***) no-repeat left top;)  
  13.   
  14. background-imageurl(***) repeat-x 0 0/* 横方向へ繰り返し */  
  15. (background-imageurl(***) repeat-x  left top;)  
  16.   
  17. background-imageurl(***) repeat-y 0 0/* 縦方向へ繰り返し */  
  18. (background-imageurl(***) repeat-y  left top;)  

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

ヘッダー画像

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

  1. #header {  
  2.   padding20px 20px 10px;  
  3.   height170px/* 上下で30pxの余白を差し引く */  
  4.   background-imageurl(***) no-repeat 0 0;  
  5. }  

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

  1. #header {  
  2.   padding20px 20px 10px;  
  3.   height170px/* 上下で30pxの余白を差し引く */  
  4.   background-imageurl(***) no-repeat 100% 0;(right top)  
  5. }  

スポンサードリンク