背景に画像【background-image】:CSS入門

ブログが作りたい!CSS入門 > 背景に画像【background-image】:CSS入門

背景に画像【background-image】:CSS入門

背景に画像【background-image】:CSS入門

CSS入門(26)

記事「背景色の変更【background-color】:CSS入門」で、背景に色を指定しましたが、今回はさらにレベルアップして、背景に画像を使います。

お話は、次の順番で進みます。

▲ページの先頭に戻る

背景に画像を使う(background-image)

1:前回までのお話

(01)

前回は、CSSでリンクを装飾しました。

CSSでリンクを装飾

以下、前回までのCSSコードです。

▲ページの先頭に戻る

2:CSSで背景に画像を入れてみる

(02)

今回は、#blog-info(1:ブログの情報)の背景に画像を入れてみましょう。画像は適当にお好きなものを使ってください。

背景の全面に画像

これといった画像が見付からない場合は、当ブログの無料Web素材をご利用ください。

(03)

画像が決まったら、#blog-infoに「background-image」を指定します。

(04)

ブラウザで表示してみましょう。背景に画像が、繰返し表示されていると思います。

背景の全面に画像

画像を背景として設定する主なメリットは、一元管理できるようになることです。

▲ページの先頭に戻る

繰返しの設定(background-repeat)

1:background-repeatの指定値

(01)

前項では、指定した背景の全面に繰返し画像が表示されましたが、画像の数はある程度コントロールできます。

繰返しをコントロールする場合は、「background-repeat」を使います。「background-repeat」には、次の指定値があります。

  • 「repeat」、または「指定なし」
  • repeat-x
  • repeat-y
  • no-repeat

▲ページの先頭に戻る

2:全面表示(repeat)

(02)

「background-repeat」に「repeat」、または「指定なし(記述しない)」にすれば、前項で試したとおり、全面に繰返し表示されます。

背景の全面に画像

▲ページの先頭に戻る

3:横一列だけ表示(repeat-x)

(03)

「background-repeat」に「repeat-x」を指定すると、横一列だけ表示されます。

横一列だけ表示(repeat-x)

▲ページの先頭に戻る

4:縦一列だけ表示(repeat-y)

(04)

「background-repeat」に「repeat-y」を指定すると、縦一列だけ表示されます。

縦一列だけ表示(repeat-y)

▲ページの先頭に戻る

5:ひとつだけ表示(no-repeat)

(05)

「background-repeat」に「no-repeat」を指定すると、ひとつだけ表示されます。

縦一列だけ表示(repeat-y)

▲ページの先頭に戻る

表示位置の設定(backgrand-position)

1:background-positionの指定値

(01)

背景画像を表示する位置は、ある程度コントロールできます。

表示位置をコントロールする場合は、「background-position」を使います。「background-position」には、次の指定値があります。

  • left top
  • left center
  • left bottom
  • center top
  • center center
  • center bottom
  • right top
  • right center
  • right bottom

▲ページの先頭に戻る

2:左上に表示(left top)

(02)

「background-position」に「left top」を指定すると、左上に表示されます。

左上に表示(left top)

▲ページの先頭に戻る

3:左中央に表示(left center)

(03)

「background-position」に「left center」を指定すると、左中央に表示されます。

左中央に表示(left center)

▲ページの先頭に戻る

4:左下に表示(left bottom)

(04)

「background-position」に「left bottom」を指定すると、左下に表示されます。

左下に表示(left bottom)

▲ページの先頭に戻る

5:中央上に表示(center top)

(05)

「background-position」に「center top」を指定すると、中央上に表示されます。

中央上に表示(center top)

▲ページの先頭に戻る

6:中央中央に表示(center center)

(06)

「background-position」に「center center」を指定すると、中央中央に表示されます。

中央中央に表示(center center)

▲ページの先頭に戻る

7:中央下に表示(center bottom)

(07)

「background-position」に「center bottom」を指定すると、中央下に表示されます。

中央下に表示(center bottom)

▲ページの先頭に戻る

8:右上に表示(right top)

(08)

「background-position」に「right top」を指定すると、右上に表示されます。

右上に表示(right top)

▲ページの先頭に戻る

9:右中央に表示(right center)

(09)

「background-position」に「right center」を指定すると、右中央に表示されます。

右中央に表示(right center)

▲ページの先頭に戻る

10:右下に表示(right bottom)

(10)

「background-position」に「right bottom」を指定すると、右下に表示されます。

右下に表示(right bottom)

▲ページの先頭に戻る

あとがき

だらだらっと説明だけ書いてしまいましたが、すべての指定値を覚える必要はありません。

「どういうことが出来るのか?」を覚えておいて、必要になったときに調べて使えれば、OKです。(コピーして貼り付ければいいのです)

ちなみに、よく利用するのは、「background-repeat」の「指定なし」と「no-repeat」です。すべて試してみる必要はありませんが、「no-repeat」は実際に試しておくことをお薦めします。

▲ページの先頭に戻る

次回予告

次回は、最終チェックです。IEブラウザでも表示をチェックし、少しだけCSSハックのお話もいたします。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/05/15 更新日:2008/05/15

« 「CSSでリンクを装飾する」|「最後にIEでチェック+CSSハック」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

タイムリー

こんばんは!
おおおタイムリー!


今日実は、背景画像の表示で「あれ?」って事があったので、
いろいろ復習してました^^;


先にkumaさんのところへ来ればよかったorz
また何かわからなくなったら、今度は最初にここにこようorz
(わかんなくて1時間くらい悩んだ)

IE6でfont-sizeを200%以上

ひろこさん、こんにちは。
タイムリーで、1点返して逆転!(・∀・)/

私も、いくつか教えて欲しいことがあるんだなぁ。
忙しそうなので、ひとつだけ宜しいかしら?

IE6のバグなんだと思うけれど、
font-sizeを200%以上に設定したあたりから、
文字の上下が切れちゃうんですよ。(´・ω・`)

フォントによるかもしれません。(cursiveです)

原因が分からないので、とりあえずborderを入れてみたら、
borderの外側が切れていました。

Firefoxの場合も、borderの位置は同じなんだけれど、
それでも上下切らずに表示してくれている。

Googleで「font-size 大きい ie6」「font-size 文字切れ ie6」
とかで調べても、うまくヒットしなくて、どうにもねー。
(わかんなくて1時間くらい悩んだ)

とりあえず、CSSハックで、IE6なんかには、
paddingの上下を入れることにしました。

これって、有名なバグだったりするのかしら?
何か正式な良い方法は、あるのでしょうか?

なんだろう?

おはようございます!
IE6の野郎、と思わず言いたくなりますよね。
自分も昨日IE6で困りました。(わかんなくて一時間くらい悩んだ)

自分も今、文字サイズを200%にしてIE6で見てみたのですが、
切れてなかった・・・。
IE7でも切れて表示されることはありませんでした。
(line-heightなどはあえて指定していません。フォントサイズのみの指定です)

なんだろう?
もしKumaCrowさんがよければコード見てみたい・・・
で、もう一回試してみたいです。


解決できなかったら逆に申し訳ないのですが・・・

IE6のline-heightのバグ

ひろこ先生、おはようございます!

ありがとうございます!原因は、line-heightだったみたいです。
bodyに入れちゃっていたのだけれど、ダメなんすか?(´Д`;)ガビーン

あえて指定しないってことは、バグが出やすいってことですか。
行間は、何を使って設定すれば良いのかしらん?(;´Д`)アウー

そんな、大先生の手を煩わせるなんて、恐れ多いッス。
お忙しいところ申し訳ないです。

原因が分かったので、対象とするタグには、
line-heightしないことにします。(・∀・)/アリガトー

なるほどー

またお邪魔します。
いやいや、自分は普段は、bodyにもpにもline-height入れてるんですが、
さっき指定しなかったのはまんまフォントサイズのみ指定だったらどうなるべ、と
思っての事でした。


いつもはクラスで目立たないタイプのline-heightが
そんな事の原因になるなんて・・・
こちらも勉強させて頂きました、こちらこそありがとうございました!

イヤーン

ひろこさん、こんにちは。

おかげさまで、解決しました。
まれに、line-heightの単位を指定していないテンプレートは、
こういう理由があったんやなと、いまさら気付きました。

「もう、忘れないで欲しいナリ」なんて思っていたのだけれど、
こんな話が、そこかしこに結構あるんでしょうね。(´Д`)イヤーン

画像が表示されてうれしいです。

まだ やっています。おかげさまで。
 インデントの件、IE7で正確に1文字できましたが
 Firefoxはダメでした。
我が家のIEはとてもオリコウサンなのでしょう。
でもあくまでKumaCrowさんの説明とコードが
あればこそ ここまでくることができました。
ありがとうございました。
あとは復讐しながら
自分で組み立ててみようなどと
”野望”を抱いています。


妻女山のふもと八幡原に布陣

sachiさん、こんにちは。
コメントありがとうございます。

す、すごい。
とうとうCSSも攻略してしまったんですねー。

才女なのね、きっと。
こりゃあ、謙信公もびっくりだわ。


インデントの件は、申し訳ないです。
やはり再現できないと、何ともはや・・・ごめんなさい。


野望(?)が叶うと良いですね。
でも、sachiさんなら、ちょちょいと出来そうです。

僭越ですが、こんな時代ですから、年長者には、
どんどん情報を発信してもらえたらと思っています。

宜しくお願い申し上げます。

No title

背景の画像について質問です 画像を1個だけ表示することゎ わかりました ボクが知りたいのゎ 画像があって その画像が画面いっぱいに表示してほしいんですけど ちっさくなって 困っています 画像大きくする方法(でいいのかな?)おしえてもらいたいです それと スクロールしても背景が動かないようにしたいです・・・ このサイトでいろいろ探してみてゎいるもののボクバカなんで 見つかりません(それともないのかな?) もし しってたらおしえていただきたいです・・・ 念のため画像URL乗せます http://blog-imgs-19-origin.fc2.com/t/a/b/tabo2yuri/8_20090803001254s.jpg

スマートな方法は・・・。

有希さん、こんにちは!(・∀・)/へろー
コメントありがとうございます。

お答えします。

【01】小さい画像を、背景として画面いっぱいに表示するには?

残念ながら、CSSによる指定で、
背景画像を大きく表示することは、現状のCSSでは出来ません。

なぜ、できないかと言うと、

小さい画像を、背景画像(background)として大きくする機能が、
現状のCSS2.1という規格に存在しないためです。


【02】スクロールしても、背景画像を固定で表示するには?

次の指定を行うと、固定で表示できます。

background-attachment: fixed;


【03】もごもご

どうしてもやりたい場合は、

画像を画像編集ソフトなどで大き目にしておいて、
背景色とうまく調整して妥協するか、

強引な方法なので、おすすめ出来ませんが、
「position: absolute;」で絶対配置にするとか、

・・・でしょうか。

JavaScriptでも出来そうですが、
見る側がJavaScriptをOFFにしていたら、あかんしね。

ん~、申し訳ないのですが、
スマートな方法は、ちょっと聞いたことがありません。

No title

なるほど わかりやすい説明ありがとうございます! どうしても画像を大きくしたい場合はCSSをいじってもできないわけですね 画像を編集してどうにかすればいいわけですね スクロールの方もありがとうございます 勉強になるいいサイトですね!

No title

画像のほうもできました ありがとうございます! あなたのおかげでここまでできました本当に感謝します!

良かった、良かった。

有希さん、こんにちは!(・∀・)/ぐもに
コメントありがとうございます。

どうやら解決したようで、何よりです。
良かった、良かった。ヾ(*´∀`*)ノわーい

それから、各種ブラウザでのチェックや、
違うサイズのモニタなどでも確認しておく方が良いかもしれませぬ。

それでは、また遊びにきてねーん。(´▽`)♪

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/296-4132c1b7
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて