CSSで背景画像を位置調整、固定、繰り返し表示する方法

2020年5月2日HP制作覚書,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の位置を指定しています。

 

是非、お試しください。

 
＜スポンサーリンク＞




 

 

 

HP制作覚書,CSS

Posted by Hiro先生