先生と生徒の会話形式で理解しよう

生徒

「ウェブサイトの背景に画像を入れたいんですが、CSSでできますか？」

先生

「はい、CSSのbackground-imageを使えば簡単に背景画像を設定できますよ。」

生徒

「どうやって書けばいいのか教えてください！」

先生

「では、基本的な使い方から一緒に学んでいきましょう！」

1. CSSで背景画像を設定する基本の書き方

CSSでは、背景画像を設定するためにbackground-imageというプロパティ（設定項目）を使います。これは、HTMLタグの背景部分に画像を表示させたいときに使います。記述方法はとてもシンプルです。


<style>
    .bg-sample {
        background-image: url('/img/top/rank01.jpg');
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>

<div class="bg-sample"></div>

ブラウザ表示

この例では、クラス名bg-sampleが指定された

タグの背景にsample.jpgという画像を表示しています。url()の中には、画像ファイルのパス（場所）を書きます。

2. 背景画像を表示させるときの注意点

背景画像を設定するときには、いくつか注意点があります。これを知らずに設定すると、思った通りに画像が表示されなかったり、見切れてしまうことがあります。

画像が表示されない場合：ファイルのパスが間違っていないかを確認しましょう。画像ファイルが正しくアップロードされているかも重要です。
サイズを指定していない場合：背景画像だけを設定しても、表示される要素のサイズがないと画像が見えません。widthやheightでサイズを指定しましょう。
背景が繰り返される：デフォルトでは画像が繰り返されてしまいます。繰り返したくない場合はbackground-repeat: no-repeat;を使います。

3. 背景画像をキレイに見せるためのプロパティ

背景画像をより美しく見せるためには、background-sizeやbackground-positionを使うのがポイントです。


<style>
    .bg-full {
        background-image: url('/img/top/rank01.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>

<div class="bg-full"></div>

ブラウザ表示

background-size: cover;は、画像を要素全体にぴったり表示させる設定です。余白が出たり画像が切れてしまうのを防ぐのに便利です。background-position: center;で中央に配置し、background-repeat: no-repeat;で繰り返しを止めています。

4. 外部サイトの画像も使える？

background-imageでは、自分のパソコン内の画像だけでなく、インターネット上の画像も使うことができます。ただし、著作権には注意しましょう。


<style>
    .bg-web {
        background-image: url('https://moku-moku.net//img/top/rank01.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>

<div class="bg-web"></div>

ブラウザ表示

このように、URLを直接指定することでWeb上の画像を読み込むことも可能です。

5. 画像と文字を重ねるときの工夫

背景画像の上に文字を表示したいときは、文字が見えやすいように工夫する必要があります。例えば、画像の上に半透明の黒い背景をのせることで文字が読みやすくなります。


<style>
    .bg-text {
        background-image: url('/img/top/rank01.jpg');
        background-size: cover;
        background-position: center;
        position: relative;
        width: 300px;
        height: 200px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bg-text::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .bg-text span {
        position: relative;
        font-size: 20px;
        z-index: 1;
    }
</style>

<div class="bg-text"><span>背景の上の文字</span></div>

ブラウザ表示

このテクニックは、バナーや見出しに使うととても効果的です。CSSの::beforeという疑似要素を使い、背景に黒い透明のフィルターをかけています。

まとめ

今回の記事では、CSSのbackground-imageを中心に、背景画像を使ったデザインの基礎から応用まで幅広く学んできました。背景画像は、ウェブサイトの印象を大きく決める重要な要素であり、使い方を正しく理解することで、デザインの幅が大きく広がります。background-imageは単純に画像を指定するだけでなく、background-sizeやbackground-position、background-repeatなど他のプロパティと組み合わせることで、より美しく自然な背景表現が可能になります。特に、画像が不自然に切れてしまったり、意図しない繰り返しが起こるのを避けるためにも、正しい設定方法を理解しておくことが大切です。

背景画像を設定する際の注意点として、要素自体に幅や高さを指定しておかないと背景画像が目に見える形で表示されないことがあります。背景の表示領域は、HTMLタグそのものの大きさに依存するため、必ずwidthやheightを指定した上でbackground-imageを設定しましょう。また、背景の繰り返しを避けたい場合は、background-repeat: no-repeat; を使用し、画像をひとつだけ表示するように調整します。逆に、背景をタイル状に並べたい場合には、repeat-xやrepeat-yといったオプションもあります。背景画像が繰り返されることに違和感が出るかどうかは、画像のデザインや使い方によって大きく変わるため、状況に応じて使い分けることが重要です。

さらに、background-sizeの役割を理解しておくとデザインがより洗練されます。coverは要素全体を覆うように画像を大きくして表示する方法で、画面のサイズが変わっても自然に見せたいときに非常に役立ちます。containは画像全体が収まるように調整されるもので、画像の縦横比を維持したまま表示する場合に向いています。大きく見せたいのか、画像全体を見せたいのかによって使い分けるとよいでしょう。また、background-positionで中央・左・右・上下など好きな位置に画像を配置できるため、細かなレイアウトにも柔軟に対応できます。

Web上の画像を背景として読み込む方法も紹介しましたが、この場合は画像の著作権に注意が必要です。自由に使ってよい画像なのか、配布が許されているのかを必ず確認しましょう。外部サイトのURLを直接指定する方法は簡単で便利ですが、外部サイトの変更によって突然画像が表示されなくなる可能性もあるため、重要なデザインには自分のサーバーや管理下の画像を使う方が安心です。また、背景画像の上に文字を重ねる際には、可読性を確保するために透明度のある黒いレイヤーを重ねるテクニックも非常に有効です。::beforeを使ったフィルターはバナーや見出しのデザインで多く利用され、文字が背景に埋もれず見やすくなります。

background-imageとその周辺のプロパティは、単純な背景模様から視線を引きつける大きなビジュアルまで、幅広い表現に使える基本的でありながら奥深いCSSの機能です。初心者の方でも、今回の内容をしっかり理解すれば自然で美しい背景デザインができるようになります。背景画像の扱いに慣れてくると、サイトの印象を大きく変えるヒーローイメージや装飾ラインなど、より高度な表現にも挑戦できるようになります。細部まで意識して使っていくことで、ページ全体の統一感が生まれ、見る人にとって魅力的なウェブサイトを作ることができるはずです。

背景画像設定のサンプルコード


<style>
.sample-bg {
    background-image: url('/img/top/rank01.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 320px;
    height: 200px;
    border: 2px solid #ccc;
}
</style>

<div class="sample-bg"></div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「background-imageって思ったより奥が深いんですね。画像を載せるだけじゃなくて、サイズや位置も大事だとわかりました。」

先生

「その通りです。背景画像はサイト全体の印象を左右するので、細かい設定を理解して使うことがとても大切なんですよ。」

生徒

「coverを使うと全体に広がってきれいに見えますし、positionで場所を調整できて便利ですね。」

先生

「画像と文字を組み合わせたいときも、透明のレイヤーを使えば見やすくできます。いろんなデザインに活かせますよ。」

生徒

「今回学んだことを活かして、背景を工夫したページを作ってみます！」