Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css 背景画像

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssで背景画像をレスポンシブ対応させたい、

そう思っていませんか?

 

この記事では、cssで背景画像を、

レスポンシブ対応させる方法を書いています。

 

 

なので、あなたがこの記事を読めば、

背景画像をレスポンシブ対応させれるでしょう。

 

背景画像がスマホサイズになると、

うまくいかない、などで悩んでるあなたは、

このまま下にスクロールし読んでみてください。

 

スポンサードサーチ

cssで背景画像をレスポンシブ対応させるにはこれ

 

で、cssで背景画像をレスポンシブ対応させる方法、

それは、background-size:cover;

と記述することです。

 

コード例

css

.bg_img {

background:url(”);

background-size:cover;

}

 

というのも、上記のようにbackground-size:cover;を、

つけてやることで、常に要素全体を覆う(カバー)

するように背景画像が伸びてくれるからです。

 

どういうことか説明します。

 

 

例えばレスポンシブで、画面サイズがPCサイズから、

スマホサイズなどになると、テキストなどが、

縦長になって普通なら背景画像からはみ出します。

 

ですが、background-size:coverをつけておけば、

そのテキストなどの要素が伸びるのに合わせて、

背景画像も伸びてくれるわけです。

 

こんな風に。

 

(画面サイズが大きい時)

css背景画像レスポンシブ

(画面サイズを小さくした時)

css背景画像レスポンシブ

 

画面サイズが変わって白背景の部分が、

縦長になっても背景画像の長さが伸びて、

中の要素(今回の例だと白背景の部分)を囲ってくれてますね。

 

 

話が被りますが、

 

背景画像は、普通にbackground:url();

でつけただけだと、元の画像のサイズを超えたら、

画像がrepeatしたり、要素がはみ出したりして、

 

レスポンシブでの見栄えが悪いです。

 

 

ですが、background-size:cover;

をつければ、ちゃんと1枚画像で、

レスポンシブにしても背景画像が伸びてくれるので、

 

背景画像をレスポンシブ対応させたい場合は、

background-size:coverをつけとくと、

便利です。

 

 

記述をする場所

 

ちなみに、このcssをつける場所ですが、

背景画像自体に記述するようにしましょう。

 

css

.bg_img {

background:url(”);

background-size:cover;

}

 

html

<div class=”bg_img”>

中の要素または記述

</div>

 

そうすれば背景画像がレスポンシブ対応になります。

 

スポンサードサーチ

背景画像の画像内容の表示位置をコントロールしたい場合

 

ちょっと話が変わるのですが、

関連するので書いておきます。

 

background-size:coverをつけると、

確かにレスポンシブしてくれるのですが、

背景画像で表示させたい部分が出なくなることがあります。

 

(右下方向に画像が縮尺されるため)

 

 

そのため、背景画像の表示される画像部分を、

あなたが意図したものにしたい場合は、

background-positionというのを使って操作しましょう。

 

例えばbackground-position:center;

と記述すれば、どんなにレスポンシブで、

背景画像が伸びても常に背景画像の中央が表示されます。

 

 

なので、上記のようにして、

あなたの好きなように背景画像をレスポンシブさせると、

良いでしょう。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

あなたがcssで背景画像をレスポンシブ対応に、

させたい場合は、

background-size:cover;を使いましょう。

 

すると、背景画像はレスポンシブ対応になります。

 

 

また、レスポンシブ対応になった背景画像の、

画像が表示される部分をコントロールしたい場合は、

background-positionを使って操作しましょう。

 

ということで、あなたはこれで、

cssで背景画像をレスポンシブ対応にさせる、

方法がわかったと思います。

 

なので、早速、あなた自身で試してみましょう。

 

 

やることは簡単です。

 

背景画像にしたい画像を用意し、

background:url(”);とかき,

()内に画像ファイル名を書きましょう。

 

次に、今日何度も話に出た、

background-size:cover;

を合わせて書きましょう。

 

 

するとあなたのcssスキルがアップしますよ。

 

それでは、背景画像をレスポンシブ対応させる、

方法でした。

 

 

読んでもらってありがとうございました。

 

チャーさん

-css, 背景画像

スポンサードサーチ

関連記事

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。