« いろいろな無料blog | トップページ | がりがりのエルメスくん.. »

バックグラウンド

ようやく、懸案だった、バックグラウンドを、スタイルシートで自分の気に入るように設定できました。

#container {
line-height: 140%;
background-color: #ccffff;
background-image: url(b.JPG);

もしかすると、colorは設定しなくてよいのかもしれませんが、念のため。
b.JPGというバックグラウンド用の画像をココログのウエブのところでアップロードし、HTMLで表示をさせて
場所を確認し、その場所をhttpから書いても良いのですが、同じフォルダ内なので、b.JPGとしました。
#JPGが大文字のままだったのは、自分の失敗。まぁ、表示されているからよしとする。

これだけだと、左側のところと右側のところの背景にはならないので、最初

#left {
position: absolute;
left: 0px;
top: 100px;
width: 200px;
background-color: #ccffff;
background-image: url(b.JPG);

このようにしたのだが、どうも、背景に継ぎ目ができる。
いろだけだとわからないのだが、絵にしてしまうと、わかる。
気にしなければよいのだが、気になる。(笑)
なので
background-color: transparent;

としてみたら、OK。

そうすると、もともと、左と右が、お題目のところにつきだすようなデザインにしていたので、左側は写真なので
両側にかかると、それなりにかっこよい(と自分だけ思っている)のだが、右側はなんともかっこわるい。
ので、左側は写真がおおめに両方のエリアにかかり、右側はぴったりになるように

top: 100px; を左80px 右150pxに

ようやく、落ちつきました。(^^)v

ちなみに、お題目のところの足跡の背景はasi_kabe_02.gifというのをアップロードして

#banner { font-family: 'Lucida Grande', Verdana, Geneva, Arial, sans-serif; color: #1C7273; background-image: url(asi_kabe_02.gif); background-repeat: repeat;

こんな感じで設定しました。
#bannerは、#containerのすぐしたのをいじったらOKでしたが、最初、どれかわからなくて、あれこれ試行錯誤したのは内緒。(ぉい)
最後のところの引用文の改行がうまくいかないので、適宜改行してください。m(__)m
#う~ん、カッコ悪い(苦笑)

|

« いろいろな無料blog | トップページ | がりがりのエルメスくん.. »

「ココログ小技集」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/3313/135778

この記事へのトラックバック一覧です: バックグラウンド:

« いろいろな無料blog | トップページ | がりがりのエルメスくん.. »