WEBサイト制作の際に必要になるのが背景の設定ですが、背景の指定の方法がわからなかったりイメージ通りに背景画像を配置できないといったお悩みをお持ちの方も少なくないかと思います。
背景を指定するには、backgroundというプロパティを使うのですが、今回はこのbackgroundプロパティの使い方を詳しくご紹介します。もくじ
◆backgroundとは
backgroundとはCSSのプロパティです。backgroundを設定すると、背景色の変更や、好きな画像を表示することができます。
背景画像の設置の位置やサイズなど細かい調整もbackgroundプロパティを使って行うことができます。
インライン要素であるimageタグと違って、backgroundで表示した画像はデザインとして扱われます。そのため、それほど重要度が高くないものをbackgroundで画像を設定し、検索エンジンに認識してほしい重要度の高い画像であればhtmlで書いた方が良い場合もあります。
◆background-imageの使い方
背景に画像を設置するには、background-imageというプロパティを使います。
基本的にはCSSで以下の様に記述します。
セレクタ {
background-image: url(画像のパス);
}
画像のパスは、表示させたい画像の絶対パスと相対パスのどちらでも指定できます。
◆background-imageの調整
background-imageのみを設定した場合には、指定した画像サイズに合わせて画像が表示されます。backgroundプロパティを使えば大きさや位置など、デザインに合わせて調整することができます。
・背景画像を繰り返す
パターンを並べたいときなど、画像を繰り返したいときはbackground-repeatを使います。
background-repeat: 繰り返しの指定;
繰り返しの指定は以下の様に記述します。
・background-repeat: no-repeat;（背景画像を繰り返さない）
・background-repeat: repeat-x;（背景画像を横（X軸）に繰り返す。）
・background-repeat: repeat-y;（背景画像を縦（y軸）に繰り返す。）
・背景の位置の調整
background-imageは何も指定しなければ左上を基準に配置されます。
background-positionを使って背景画像の位置を調整することができます。
background-position: 横位置 縦位置;
位置の指定は以下の様に記述します。
・background-position: 60px 20px;（左から60px、上から20pxの位置を指定します。）％で指定することもできます。
・background-position: top;（背景画像の縦位置を上に指定します。）
・background-position: bottom;（背景画像の縦位置を下に指定します。）
・background-position: center;（背景画像の縦位置を真ん中に指定します。）
・background-position: left;（背景画像の横位置を左に指定します。）
・background-position: right;（背景画像の横位置を右に指定します。）
・background-position: center;（背景画像の横位置を真ん中に指定します。）
例えば、背景画像を画面の右下を基準に配置したい場合には、
background-position: right bottom;
と記述します。
・背景の大きさの調整
背景画像が大きすぎてはみ出してしまうときなどは、background-sizeを使ってサイズを調整します。
・background-size: auto;（背景画像の大きさを変更なく表示します。）
・background-size: cover;（背景画像の大きさを縦横の比率を保って、全体をカバーします。はみ出した部分は表示されません。）
・background-size: contain;（背景画像の大きさを縦横の比率を保って、画像全体に表示します。）
・background-size: 横位置 縦位置;（背景画像の大きさを縦横のpxや%で任意の大きさに指定します。）
・背景色の設定
背景色を変更したいときは、background-colorを使って好きな色を指定します。
background-color: カラーコードもしくはカラーネーム;
カラーコードは16進数のカラーコードを記述します。blackやwhiteなどの定番色はカラーネームで指定することが出来ます。
・背景画像を複数指定する
background-imageで画像のパスを複数記述すれば背景画像を重ねて設定することができます。
background-image: url(前面に表示する画像のパス),url(背面に表示する画像のパス);
先に書いたものが前面になり、後に書いたものが背面に設定されます。
◆まとめ
背景画像の設定はCSSの基本ともいえるステップです。
background-imageプロパティを使えば、細かい位置や大きさをなども簡単に調整することができます。
まずは記述方法をしっかり覚えて、魅力的なサイト制作に役立ててみて下さい。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞