*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 >  Template >  カスタマイズ >  al_responsive のカスタマイズ(背景画像変更 ② )

al_responsive のカスタマイズ(背景画像変更 ② )

rose-sm.jpg引き続き、背景画像の変更方法です。
大きい画像を背景に、ディスプレイサイズに合わせて表示するようにします。
←使用する画像はこちら。表示位置が分かり易いよう見本を表示するBoxに背景色(#e2eccb;)を付けています。

背景画像のサイズを調整するプロパティは、背景(background)に
background-size: サイズの値;
を使います。
指定できる値は下記のとおりです。

background-size:auto;

background-size:auto;
background-size :auto; 縦横比:画像サイズは自動算出されるため、基本そのままのサイズです。


background-size:contain;

background-size:contain;
background-size: contain; 縦横比:そのまま 表示領域に対して、元画像が全て収まるように調整されます。


background-size:cover;

background-size:cover;
background-size: cover; 縦横比:そのまま 表示領域一杯に覆うサイズにして、表示領域をはみ出した部分は表示されません。


background-size:px;

background-size:px;
background-size: px; 縦横:指定したサイズ(px)で大きさを調整します。(見本は120px×120px)


background-size:%;

background-size:%;
background-size: %; 縦横:表示領域に対して指定した割合で表示します。(見本は50%×50%) Boxのサイズが200px×150pxなので、 背景画像は表示領域の50%である100px×75pxで表示されます。

詳しくはこちらへ→MDN web docs


前置きがとっても長くなりましたが^^;、上記の事を踏まえて背景を変更します。
変更するCSSは前記事と同じです。
body::before{
background-image:url(アップロードした画像のURL); /* --背景画像を変更-- */
background-color:#ffffff; /* --画像非表示時のための背景色-- */
background-repeat:no-repeat; /* --no-repeatに変更-- */
background-size:cover; /* --プロパティ追加-- */
background-position:center center; /* --中央寄せなら追加-- */
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

赤文字の部分を変更して下さい。m(__)m

上記のスタイルシート
background-image:url(アップロードした画像のURL); /* --背景画像を変更-- */
background-color:#ffffff; /* --画像非表示時のための背景色-- */
background-repeat:no-repeat; /* --no-repeatに変更-- */
background-size:cover; /* --プロパティ追加-- */
background-position:center center; /* --中央寄せなら追加-- */

5行分をまとめたbackgroundショートハンドだったらこんな感じ↓
background:url(アップロードした画像のURL) #fff no-repeat center center;
background-size:cover;

の2行か、全部まとめて
background:url(アップロードした画像のURL) #fff no-repeat center center /cover;
で、良いかと。ただ、1行表記の場合で気を付けなければいけないのが、
background-sizeは、background-positionの指定の後に、「/」で区切って指定しなければならない。
という事。でないと background-sizeが効かないそうです。

コメント






管理者にだけ表示を許可する