鎌倉ライフリッチ研究所 Ver 3.70 | 人生を、豊かに生きよう。

ようこそいらっしゃいました。スローライフの聖地鎌倉へ移住して7年。グローバルビジネスやM&AどっぷりだったR40が一念発起。 ベンチャーでの仕事を通じた日々のビジネス視点だったり、観光に役立つ鎌倉の美味しいグルメ情報やイベント紹介をしてまーす。プロフィールはこちら(http://profile.hatena.ne.jp/hase263lich/)から。

背景画像をいじってみました。

以前からやってみたかった、背景画像の追加を、Vicunaさんのサイトを参考にやってみました。

image»

 Forum » mt.Vicuna » 背景画像の透過について

方法は簡単。私はVicuna CSSのStyle SmartCanvasを使っているのですが、1-elements中の記載にある、Body文を変更するだけ。

背景画像については、PHPSPOTの記事「デザイナーが知っておくべき背景画像のリソースサイト集」を参照し、Shizooさんのものを使わせてもらいました。素敵なグラフィックをが沢山ありましたので、ちょっと迷いましたが、鎌倉チックに緑色。

image 

Shizooさんのグラフィックから、いくつかピックアップしてみました。センスいいです~

006 002 uppi20 pat3

あと、 「和風素材の篆刻(てんこく)素材AOI」さんにも、和モダン?なグラフィックが多く有ります。オススメです。

image

 image image image image image

本当は、ブログ記事やサイドバーも透過させたいのですが、フォント色との調整が発生しそうだし、各モジュールごとにいじる必要がありそうなので、今日はとりあえず良し。

<変更前>

image

で、、

<変更後>

image 

<自分メモ: 普通のスタイルシートで背景画像を変更する場合>

◎ 背景色(画像)変更方法
以下のスタイルシートCSS)の赤字部分を変更。
ブログ全体の背景色を変更する場合
body {
background-color : #123456;
}
ブログ全体の背景画像を変更する場合
body {
background : #123456 url("画像へのパス(URL)");
}
※備考; "#123456" は、背景画像が表示されない時に表示する色を指定
▼ 背景画像の位置を指定する場合
body {
background : #123456 url("画像へのパス(URL)") no-repeat fixed 50% 30%;
}
※「no-repeat fixed 50% 30%」を追加 (”50% 30%”は、縦、横の配置位置の割合)
▼ 背景画像を固定する場合
body {
background : #123456 url("画像へのパス(URL)") fixed;
}
※「fixed」を追加

多少なりとも雰囲気が出てきました。少しずつ、少しずつ。

Hatena タグ: ,

↓↓↓応援のクリック、宜しくお願いします! ↓↓↓