JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【CSS入門】ウェブページに背景画像を設定する方法

ウェブページに背景画像を設定するには、CSSを使用します。<style>タグ内でbackground-imageプロパティを指定することで、JPG・PNG・SVG・GIFなどの画像ファイルをページの背景として表示できます。

なお、HTML5では<body>要素のbackground属性がサポートされていないため、背景画像の設定にはCSSを使うのが標準的かつ推奨される方法です。

【CSS入門】ウェブページに背景画像を設定する方法

記述例

以下のコードを参考にすると、HTMLページの背景画像を簡単に設定できます。実際にエディタに貼り付けて動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url("/videotutorials/images/tutor_connect_home.jpg");
         }
      </style>
   </head>

   <body>
      <h1>Connect with Tutors</h1>
   </body>
</html>

ポイント解説

上記のコードでは、<style>タグ内のbodyセレクターに対してbackground-imageプロパティを指定しています。url()の中に表示したい画像のパスを記述することで、その画像がページ全体の背景として反映されます。

さらに実用的な設定を行いたい場合は、以下のプロパティと組み合わせると効果的です。

  • background-size: cover; … 画面サイズに合わせて画像を拡大・縮小し、領域全体を覆います
  • background-repeat: no-repeat; … 画像の繰り返し表示を防ぎます
  • background-position: center; … 画像を中央に配置します

これらを組み合わせることで、レスポンシブ対応の美しい背景画像を実現できます。

  1. Macの壁紙（背景）を変更する方法｜カスタム画像や自動切り替え設定も解説

    壁紙は、あなたの個性やセンスを映し出す大切な要素です。愛するペットのかわいい写真、結婚式の思い出の一枚、思わず笑顔になるお気に入りのアートワーク——自分好みの画像がデスクトップに表示されているだけで、毎日の作業がぐっと楽しくなります。 画像出典：YouTube 工場出荷時のままのデフォルト背景を使い続けるのは、正直少し退屈ですよね。幸いなことに、macOSには壁紙を変更するための多彩な機能が用意されています。Macには豊富な標準壁紙がプリインストールされており、その中から選ぶこともできますし、好きなカスタム画像を設定することも可能です。さあ、あなたのMacをお気に入りのスタイルに着替えさせま

  2. 画像の背景を透明にする方法｜Windows・Mac・オンラインツール5選

    ロゴを他の写真に重ねたい、商品プロモーション用の素材を作りたい――背景なしの画像が必要になる場面は意外と多いものです。散らかった背景を取り除いた画像は、さまざまな方法で簡単に作成できます。WindowsやMac向けのアプリだけでなく、オンラインの無料ツールを使えば画像の背景を透明にすることも可能です。背景を削除して、商品写真をもっと際立たせましょう。 この記事では、各プラットフォームで利用できるツールを使って、背景を透過した画像を作る方法をわかりやすく解説します。手順はとてもシンプルで、誰でも芸術的で魅力的な仕上がりの画像に変身させることができます。 画像の背景を透明にする方法 背景が透明な画