CSSで背景画像を位置調整、固定、繰り返し表示する方法2020年1月31日2020年5月2日HP制作覚書,CSS目次1. CSSで背景に画像を繰り返し挿入する2. CSSで背景に画像を繰り返さずに挿入する3. CSSで背景に画像を全体に表示する4. CSSで背景画像のサイズを調整する5. CSSで背景画像を左右、上下、中央に表示させる6. CSSで背景画像を左上、右上、左下、右下に表示させる7. CSSで背景画像を細かく位置調整して表示させる CSSで背景に画像を繰り返し挿入する 以下コードを挿入すると 指定エリア全画面上に繰り返し表示されます。 追加したいエリアの指定クラスまたはID{ background-image: url("画像のURLを差し替える"); } CSSで背景に画像を繰り返さずに挿入する 以下コードを挿入すると 元画像のサイズの画像が表示されます。 追加したいエリアの指定クラスまたはID{ background-image: url("画像のURLを差し替える"); background-repeat: no-repeat; } ＜スポンサーリンク＞ CSSで背景に画像を全体に表示する 以下コードを挿入すると 追加したいエリア全体に画像が表示されます。 追加したいエリアの指定クラスまたはID{ background-image: url("画像のURLを差し替える"); background-size: cover; } CSSで背景画像のサイズを調整する 以下コードを挿入することで 背景の画像サイズを調整することが出来ます。 40%の項目をそれぞれの画像に合わせて自由に数値を変更されると良いです。 ちなみに40%のエリアが横幅指定 autoのエリアが高さ指定 つまり横幅は40%で高さはそれに準じて自動的に設定されるということです。 追加したいエリアの指定クラスまたはID{ background-image: url("画像のURLを差し替える"); background-repeat: no-repeat; background-size: 40% auto; } また以下パターンでの表記も同じです。 background-size: 40%; この表記の場合は、横幅40%で高さはautoになっています。 つまり横幅に準じて自動的に調整されます。 なので上記表記でも下記表記でも同じです。 CSSで背景画像を左右、上下、中央に表示させる 以下コードを挿入することで 背景画像を左右、上下、中央に表示させることが出来ます。 leftで左、rightで右、topで上、bottomで下、centerで中央に表示させることが出来ます。 追加したいエリアの指定クラスまたはID{ background-image: url("画像のURLを差し替える"); background-position: left; background-repeat: no-repeat; background-size: 40% auto; } CSSで背景画像を左上、右上、左下、右下に表示させる 以下コードを挿入することで 背景画像を左上、右上、左下、右下に表示させることが出来ます。 right bottomで右下、right topで右上、left bottomで左下、left topで左上に表示させることが出来ます。 追加したいエリアの指定クラスまたはID{ background-image: url("画像のURLを差し替える"); background-position: right bottom; background-repeat: no-repeat; background-size: 40% auto; } CSSで背景画像を細かく位置調整して表示させる 以下コードを挿入することで ご自身で好きな位置に自由自在に調整して表示させることが出来ます。 追加したいエリアの指定クラスまたはID{ background-image: url("画像のURLを差し替える"); background-position: right 35% bottom 5%; background-repeat: no-repeat; background-size: 40% auto; } 上記コードは右から35%、下から5%の位置を指定してます。 この数値は自由に設定してください。 background-position: right bottom 20px; ちなみにこの場合は 右寄せで下から20pxの位置を指定しています。 background-position: right 50% bottom 20px; このパターンは右から50%、舌から20pxの位置を指定しています。 是非、お試しください。 ＜スポンサーリンク＞