「background-imageってどうやって使いこなすの?」WEBサイトを作る上で、背景画像は大事な役割を持っていますよね。background-image」を使います。使いこなすことが難しいのも事実です。それもそのはず、背景の指定の仕方にはいくつかの種類があるからです。css初心者の方から、「こんな背景にしたい!」というイメージがある人まで、全ての人に向けて、background-imageを使った背景の指定の方法を解説します。この記事を読んで、一緒に背景に画像を指定する方法を理解しましょう!まだCSSの読み込みができていない方は、こちらの記事を参考にしてください。background-imageを使えば、背景に画像を指定することができます。背景画像を入れることができるようになれば、より高度なWEBサイトにすることができます。背景に画像を指定するためにはどんなコードを書けばいいのか解説していきます!CSSの書き方についてまだ理解できていない方は、こちらの記事を先に読むと良いでしょう。WEBCAMPのSKILLSコースをおすすめします!background-imageの【基本】の使い方background-imageの指定自体はCSSで行なっていきますが、もちろんCSSだけでは作ることができないのでHTMLと併せて見ていきます。基本となるコードを見ていくことにしましょう。今回説明する中で完成させるWEBページのイメージはこちらです。このときのHTMLとCSSのコードはそれぞれ下のようになります。url(画像のURL);}今回は全体に背景を指定する場合なので、bodyに対してbackground-imageを指定しています。指定するときの【基本】は以下の通りです。);画像のファイルURLは、相対パスと絶対パスの両方を使うことができます。そもそもパスというのは英語で書くと「path」、つまり「道」という意味を持っています。住所のような、どの階層から見ても変わることのない絶対的な場所のことここからは、「background-image」と合わせてよく使われるものを紹介していきます。【画像の大きさを変更する】background-sizebackground-imageで挿入した画像のサイズを変更するには、以下のように指定していきます。サイズの指定;サイズの指定には「px」「%」「キーワード」の3種類を使うことができます。pxや%は他でも出てくる通り数字を当てはめるだけですが、キーワードには下のようなものがあります。サイトのサイズに対する割合で表示されます自分のイメージに合わせて使っていくようにしましょう。【同じ画像を繰り返し使う】background-repeat下の図のように同じ画像を繰り返したいときについて説明します。繰り返し同じ画像を使いたいときは、CSSで以下の指定をします。repeat;」の指定をしたものです。これは縦と横両方に繰り返しを指定していますが、それ以外の繰り返しにすることも可能です。指定できる値には下のようなものがあります。横方向にのみ繰り返す【画像を決まった位置に置く】background-position背景画像の表示を開始させる位置を変えたいときは以下のような指定をします。値;背景画像は、何も指定をしない限り上端・左端に揃えられます。値の指定の仕方が3通りあるので、「数値(px)」「%値(%)」「キーワード」にわけて説明をしていきます。数値(px)左上からの距離をpxで表すことで位置を指定する方法です。○px(縦);このように横・縦の順番で左上からの距離を値として書き入れます。%値(%)数値の時とは違った考え方になります。左上からの距離ではなく、画像内の位置と要素内の位置を揃えるイメージです。指定するときは以下のようになります。;にすると、画像内の左端から30%・上端から20%にある場所が、要素内の左端から30%・上端から20%の場所と重なるように表示されるということです。キーワードキーワードを用いて位置を指定する方法です。どんな値を指定することができるのかを説明します。キーワード;使える値は、以下の通りです。→真ん中に来るようにする片方しか指定しない場合は、もう片方は0ではなくcenterで指定されます。【固定と移動を指定する】background-attachmentスクロール時に背景が動くようにするのか、動かないようにするのかを変更する方法を説明します。値;これを使うことでスクロール時に背景画像をスクロールに伴って移動させるか、固定されたままにするかを決めることができます。何も指定しなければ、スクロールに伴って移動するようになっています。指定できる値は下の通りです。>\この記事を読んでいるあなたはSKILLSがおすすめ!!/受講内容の詳細はこちら作りたい背景に近づけるテクニックさらに知っておくと良いものをまとめてお伝えします。一括で指定できる方法があります。positionの5つです。どの順番で書いても良く、区切るときは半角を開けます。以下のように指定することができます。;これは前から、色・画像・繰り返し・固定・画像の位置を指定しています。画面の表示サイズが変わった時に、画像が縮んだり伸びたりしてしまいます。パソコンで見ても、スマホで見ても同じように背景が表示されなければ不便ですよね。実際のコードは以下の通りになります。padding-topに%を使う時は、親要素の横幅を基準にして大きさが定まることはご存知でしょうか?そのため、heghtが無くとも、paddingで自動的に高さが調整されます。複数枚の画像を背景に指定する複数枚の画像を背景に使いたいときは、使いたい画像をカンマで区切って書き込むだけです。);このとき注意して欲しいことは、重なる順番のことです。最初に指定した画像が最前面に、最後に指定した画像が最背面になるということを覚えておいてくださいCSSで背景を指定するbackground-imageまとめCSSのbackground-imageを使えば、背景に画像を指定することができます。WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。資料をダウンロードするIT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。資料をダウンロードする働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。ペースでエンジニア転職を目指す。