【HTML入門】背景画像を繰り返し・固定・全画面表示にする方法

こんにちは!ライターのシホです!

みなさんはHTMLで背景に画像を挿入したいとき、

画像が繰り返されてしまう・・・。
一枚の画像を画面全体に表示するにはどうすればいいの?

と、思うようにいかないときはありませんか?

そこで今回は、HTMLで背景に画像を挿入する方法を解説していきたいと思います!

また、背景などのデザインを変更する際はCSSで記述することが推奨されているので、CSSで背景に画像を挿入してデザインしていく方法も説明していきます。

ぜひ参考にしてみてください!

HTMLで背景に画像を挿入する

HTMLで背景に画像を挿入するには、body要素にbackground属性で画像を指定します。

<body background="画像ファイル名またはURL"> ~ </body>

サンプルコード

<body background="かわいい犬.jpg">
  背景に指定した画像が繰り返し並びます。
</body>

ブラウザ表示

背景画像繰り返し

このように、HTMLの基本のタグで指定した場合は、画像は繰り返し表示されます。こういった背景にしたい場合はHTMLで背景に画像を簡単に挿入することができます。

もし、一枚の画像を全画面で表示したい、背景を固定したいとなどといった場合は、CSSを使いましょう。なぜかというと、HTMLは基本的に構造や内容を表すもので、背景などの装飾はCSSを使うことが推奨されているからです。

CSSで背景に画像を挿入する

挿入する

CSSで画像を背景に挿入する場合は、background-imageプロパティにurl("画像へのパスまたはURL")で画像を指定します。画像へのパスはCSSファイルと同じ場所に画像がある場合はファイル名でOKです。

HTMLファイル

<body>
  背景に指定した画像が繰り返し並びます。
</body>

CSSファイル

body {
  background-image: url("かわいい犬.jpg");
}

ブラウザ表示

背景画像繰り返し

このように、HTMLのタグで背景画像を挿入したときと同じように、画像が繰り返されます。

画像を繰り返さない

背景の画像を繰り返したくない場合は、background-repeatプロパティにno-repeatを指定します。

HTMLファイル

<body>
  背景に指定した画像が繰り返されません。
</body>

CSSファイル

body {
  background-image: url("かわいい犬.jpg");
  background-repeat: no-repeat;
}

ブラウザ表示

背景画像繰り返さない

画面全体に表示する

一枚の画像を画面全体に表示したい場合は、background-sizeプロパティにcoverを指定します。coverを指定すると、どのブラウザ(PC・タブレット・スマートフォンなど)でも画面いっぱいに背景画像を表示できます。

HTMLファイル

<body>
  背景に指定した画像が画面全体に表示されます。
</body>

CSSファイル

body {
  background-image: url("かわいい犬.jpg");
  background-size: cover;
}

ブラウザ表示

スクリーンショット 2018-05-15 18.44.50

背景画像を固定する

背景をスクロールしても動かないように固定する場合は、background-attachmentプロパティにfixedを指定します。背景が固定されているかは、こちらのブラウザ結果の部分をスクロールすると確認できます。

※サンプルコード表示ツールの都合上、画像へのパスはURLになっています。

See the Pen bMjxEW by Shiho Sakai (@shiho-sakai) on CodePen.0

このように、背景画像が固定されます。

ウェブサイト制作スキルで自由に働けるようになるには

「個人でウェブサイト制作のお仕事を請け負い、後々はフリーランスとして自由に働けるようになりたい」そんな生活をするには、HTMLに加えてCSSやJavaScript、PHPなどのスキルがあると理想に近くことができます。

ウェブサイト制作に必要なスキルと学習手順は「プログラミング学習診断アプリ」より、確認できますのでこちらを見てみてください。

こういった複数のスキルを身につけるには独学よりもプログラミングスクールで経験者から直接教わるのがおすすめです。

侍エンジニア塾では、あなたの理想な働き方から逆算して必要なスキルをオーダーメイドであなた専用に作成し、理想の働き方を実際にしている講師からマンツーマンで教わることで、一気にスキルアップをはかることが可能です。

技術だけでなくそれまでの勉強方法やエピソードなども話すことができ、エンジニアになって自由に働くイメージができたという意見もございました。

無料体験レッスンでは、まずあなたのやりたいことやプログラミングを学ぶ目的を聞かせていただいた上で、なにを学ぶべきなのか、どう学ぶとスムーズに進むのかなどの学習方法もお伝えさせて頂きますので、是非こちらのボタンよりお申し込みください。

オンライン受講も可能なため、全国各地よりお申し込みが可能です。

無料体験レッスンに申し込む

まとめ

いかがでしたでしょうか。

HTMLで背景に画像を簡単に挿入できますが、デザインに融通をきかせたいときはCSSを使うと柔軟に対応できます。ぜひ実践してみてくださいね!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー