p's stylesheets factory

スタイルシートで、皆さんがやりたいことの一つは・・・
背景画像やバナーの入れ替えや追加だと思いますが、
そのご希望をかなえるのは・・・
backgroundのプロパティーというか・・おまじないです。
これって、かなり便利な面も多く・・
実は一文で書けたりするのですが、結構何行かで書かれていることもあります。
これは、フェアリーでのバナーの画像貼り付け例です
#banner,#subbanner{
background:#FFFFFF url(/usr/syarara/cut_fairy_agl_w_blue450_225.JPG) no-repeat;
padding:0px 10px 0px 10px;
height:225px;
}

background:の後ろに続く＃の後のコードが背景色で、
urlによる画像指定が無い場合はこちらの色にて背景色が指定できますね。
また、url()で囲まれている中に、絶対あるいは相対番地を指定して画像を貼り付けられます。
ここで、no-repeatの指定がありますが、
こちらが無いとあまっているスペースがあるだけ反復されて表示されるためです。
また、この場合指定してませんが、top leftを指定しているのと同じ配置となります。
項目中に、heightがありますが、これは、画像の高さに合わせています。
この指定によって、画像がちょん切られることも無く、また、空間が空いて間延びすることも無いですね。

また、ブログ記事中にワンポイントで背景画を入れたいときなどには、
どこのセレクタに入れるとうまくいくかわからないときは、
mainやblogbodyなどのプロパティー中に・・・・

border-top:1px solid #389b64;
border-left:1px solid #389b64;
border-right:1px solid #389b64;
border-bottom:1px solid #389b64;

この4行を足してみてください。
但し、他に罫線指定（枠線）があるときは注意してくださいね。
そうすると、大体の項目の場所が見えますので、
どこに入れたらいいのかが判ります。
また、先ほどの、場所指定のおまじないですが、

top	上寄せ

bottom	下寄せ

left	左

right	右

center	中央

などが使えます。
px指定などの数値も使えますが、
かなり技術を要するかも知れません（汗）
また、他の枠との相対位置での指定も出来ますので、
かなり・・・奥が深いですね。

又、よく題名などの前に着くアイコンなども、
こちらのbackgroundの指定でつけることが多いですね。
但しこの場合は、テキストを余白指定でずらして表示することになります。


次回は・・・・余白でも書きますかね。。。