CSSで背景画像を設定する方法【background-image】

    • このページをはてなブックマークに追加

    公開日:2016年08月16日 最終更新日:2019年09月12日

    CSSの「background-image」プロパティを使って背景画像の設定をしてみましょう。ページの背景などに画像を利用するとホームページのイメージもだいぶ変わります。本コラムでは基本的な背景画像の設定方法を説明します。

    関連記事:HTML入門:タグで画像を表示させてみよう~
    関連記事:CSSで写真や画像に影をつける方法【box-shadow】プロパティ
    関連記事:CSS入門:img画像のスタイルを整える方法

    目次

    1. ページ全体の背景画像を設定する

    1.1. background-imageプロパティの基本書式

    CSSでホームページの背景全体に画像を設定するには、「background-image」プロパティを使います。

    ●「background-image」の基本書式

    background-image: url( 画像ファイルのURL );

    background-imageプロパティ」は背景画像を指定すると、通常画像は縦横に繰り返し表示されます。値には画像ファイルのパスを「url()」の中に、絶対パスもしくは相対パスで指定します。サンプルファイルの「bgimg.html」をPC上に作成して下さい。ファイルの保存形式は「utf-8」にします。

    ●bgimg.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門-背景画像</title>
    <style>
    body {
    background-image: url(img/star.png);
    }
    </style>
    </head>
    <body>
    <p>背景画像の設定</p>
    </body>
    </html>

    「bgimg.html」ファイルと同じフォルダ内に「imgフォルダ」があり、その中の画像ファイル「star.png」を背景として指定する場合、url()のファイルパスは「img/star.png」です。

    ●star.png

    ●ブラウザーの表示

    bgimage1

    ▲ページトップへ戻る

    1.2. 透過画像に背景色を設定する

    「background-image」プロパティに透過画像を設定している場合は、背景の色を「background-color」プロパティで指定すると画像の背景色として表示されます。

    ●bgimg.html

    <style>
    body {
    background-color: #000000;
    background-image: url(img/star.png);
    }
    </style>

    ページ全体の背景色を「黒」にすると、画像(star.png)の背景に色(#000000)が適用されます。

    ●ブラウザーの表示

    bgimage5

    この例では背景の色を黒に設定しましたが、背景と文字の色が同じ色になり、文章が読めなくなっています。背景色と文字の色を設定する時には気をつけて設定をしましょう。

    ▲ページトップへ戻る

    1.3. テキストの一部に背景画像を指定する

    上の例ではセレクタを「body」にしましたが、「divタグ」や「pタグ」、「spanタグ」の他に「tableタグ」などに「background-image」プロパティを指定すると、ページ全体ではなく特定の部分に背景画像を指定することができます。今回は「spanタグ」に背景画像を設定する方法を見てみましょう。

    ●bgimg.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS入門-背景画像</title>
    <style>
    body {
    color: #000000;
    background-color: #ffffff;
    }
    span {
    color: #0000ff;
    background-color: #ffffff;
    background-image: url(img/colors.gif);
    }

    </style>
    </head>
    <body>
    <p>背景画像の設定<br>
    <span>特定の領域に画像を指定</span>することもできます。</p>
    </body>
    </html>

    ※「bgimg.html」ファイルをPC上に保存して文字化けを起こする場合は、ファイルの保存形式を"utf-8"にするか、「<meta charset="UTF-8">」を「<meta charset="shiftjis">」に書き換えて下さい。

    「bodyセレクタ」の背景色は白「background-color: #ffffff;」、文字の色を黒「color: #000000;」に設定し、「spanセレクタ」で背景画像の「background-image: url(img/colors.gif);」、背景の色を「background-color: #ffffff;」、文字の色を「color: #0000ff;」で設定しています。通常は「spanタグ」で指定した範囲の文字に対して、背景画像と文字の色が適用されます。

    ●ブラウザーの表示

    bgimage6

    「background-imageプロパティ」を指定するときは、画像の表示を禁止しているブラウザー対応用に、背景の色と文字の色(colorプロパティ)を合わせて指定しておくとよいでしょう。

    ●ブラウザーの表示

    bgimage7

    画像が表示されない場合の背景色に合わせて文字の色を青色に設定ました。 その他にも基本の背景画像の設定がありますので、順に見ていきましょう。

    ▲ページトップへ戻る

    2. 背景画像の繰り返しを指定する【background-repeat】

    2.1. 背景画像を縦横に繰り返す - background-repeat:repeat

    「background-image」プロパティを設定した時の初期値になりますが、「background-repeat」プロパティの値に「repeat」を指定すると背景画像は縦横に繰り返し表示されます。

    bgimg.html

    <style>
    body {
    background-image: url(img/star.png);
    background-repeat:repeat
    }
    </style>

    ●ブラウザーの表示

    bgimage1

    ▲ページトップへ戻る

    2.2. 背景画像を1回だけ表示する - background-repeat:no-repeat

    「background-repeat」プロパティに"no-repeat"を指定した場合は、名前の通り画像の繰り返しはされません。

    bgimg.html

    <style>
    body {
    background-image: url(img/star.png);
    background-repeat:no-repeat
    }
    </style>

    ●ブラウザーの表示

    ▲ページトップへ戻る

    2.3. 背景画像を横方向に繰り返す - background-repeat:repeat-x

    「background-repeat」プロパティに"repeat-x"を指定した場合、画像をx軸、つまり横方向に繰り返して表示されます。

    bgimg.html

    <style>
    body {
    background-image: url(img/star.png);
    background-repeat:repeat-x
    }
    </style>

    ●ブラウザーの表示

    bgimage3

    ▲ページトップへ戻る

    2.3. 背景画像を縦方向に繰り返す - background-repeat:repeat-y

    「background-repeat」プロパティに"repeat-y"を指定した場合、画像をy軸の縦方向に繰り返して表示されます。

    bgimg.html

    <style>
    body {
    background-image: url(img/star.png);
    background-repeat:repeat-y
    }
    </style>

    ●ブラウザーの表示

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • OCTPASS

    ピックアップ

    正社員

    【Java/PHP】システム開発エンジニア|企業グループIT部門◎100%自社内開発★未経験

    年収 :250万円〜350万円

    ◆700名規模グループ内のITシステムの開発や保守業務 ◆自社内開発100%!じっくりと業務に取り組める ◆...

    株式会社イノベーションネクスト

    正社員

    【LAMP】システムエンジニア|100%自社内開発★服装自由・フレックス◎独学可

    年収 :300万円〜350万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Java】システムエンジニア|100%自社内開発★在宅導入/時短OK◎働くママさん歓迎

    年収 :350万円〜600万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Python】開発エンジニア|自社ECサイト★マンガ×IT少数精鋭のベンチャー◎独学可

    ◆月間10億PVのマンガサービスを支えるPythonエンジニア ◆マンガに興味ある方!はじめはPython勉強意欲...

    株式会社TORICO

    正社員

    【C】自社内組み込みエンジニア|IoTプライム案件中心★定着率◎フレックスタイム制/教育環境有

    年収 :400万円〜700万円

    ◆⾞載メーター系 ・IoT/Bluetooth等の組み込み開発エンジニア ◆エキスパート集団の中で次世代の技術を...

    株式会社エクス

    OCTPASS

    絞り込みメニュー

    絞り込みメニュー

    職種で探す

    SEACH_LISTjobcat257

    SEACH_LISTjobcat258

    SEACH_LISTjobcat259

    SEACH_LISTjobcat260

    SEACH_LISTjobcat261

    SEACH_LISTjobcat262

    SEACH_LISTjobcat263

    SEACH_LISTjobcat264

    SEACH_LISTjobcat265

    SEACH_LISTjobcat266

    SEACH_LISTjobcat267

    業種で探す

    雇用形態で探す

    勤務地で探す

    SEACH_LISTloccat391

    SEACH_LISTloccat394

    SEACH_LISTloccat403

    SEACH_LISTloccat413

    スキルで探す

    SEACH_LISTsklcat465

    SEACH_LISTsklcat466

    SEACH_LISTsklcat467

    SEACH_LISTsklcat468

    SEACH_LISTsklcat469

    SEACH_LISTsklcat470

    SEACH_LISTsklcat471

    こだわり条件で探す

    SEACH_LISTgoodcat337

    SEACH_LISTgoodcat338

    SEACH_LISTgoodcat339

    SEACH_LISTgoodcat340

    SEACH_LISTgoodcat341

    SEACH_LISTgoodcat342

    SEACH_LISTgoodcat343