ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > スポンサー広告 > title - 背景に画像を使いたい!TOP > カスタマイズをしよう! > title - 背景に画像を使いたい!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

背景に画像を使いたい!

元は色で指定されていた背景を画像に変える方法


標準
今回は共有テンプレート[999]の背景の白色から、画像に変えたいという例で説明したいと思います。

まずブログ全体はBODYで指定するのでテンプレートの設定のスタイルシートの編集をいきなり見てみます。


body{
background-color: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
}

背景の色を指定するbackground-colorがありました。
これを削除してbackground-image: url(画像ファイルのURL);に書き換えます。

星
今回使う画像がこちらです。

ブラック
このように背景が変わりました。

body{
background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/hosi.gif);
background-repeat: repeat;
background-attachment: fixed;

margin: 0;
padding: 0;
text-align: center;
}

該当部分を書き換えて、繰り返し表示する指定をし、画面をスクロールする時に背景の画像は一緒にスクロールしないで固定する指定をしました。

画像のタグ紹介

画像の並び方
background-repeat: repeat-x; 横1列に並べる
background-repeat: repeat-y; 縦1列に並べる
background-repeat: no-repeat; 1つだけ表示する
background-repeat: repeat; 繰り返し表示して敷き詰める

画像の表示位置
基本形 background-position:横方向 縦方向;
横方向 left(左) center(中央) right(右)
縦方向 top(上) center(中央) bottom(下)
表示位置の例-background-position: left top; (左上に表示)
表示位置の例-background-position: right bottom; (右下に表示)

数字と単位で指定する事もできます。横方向は左からの距離で、縦方向は上からの距離で指定します。(単位はpx・%など)
表示位置の例-background-position: 50px 100px;
(左から50px、上から100pxの位置)
表示位置の例-background-position: 150% 300%;
(左から150%、上から300%の位置)

背景画像のスクロールの有無
background-attachment: fixed; スクロールさせない
background-attachment: scroll; スクロールさせる

スクロールさせないとは、文字だけ動いて背景は固定する事。
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない

スクロールさせるとは、背景までもが一緒に動いてしまう事。
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる

他にも最初に紹介した表示方法や表示位置の指定などを使いながら、自分の表示させたい様にいろいろ編集してみて下さい。
関連ページ)
背景の色を変えたい!
背景の画像を変えたい!
・背景に画像を使いたい!


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/141-72a79ed7   

Template Designed by DW99

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。