CSSで画面いっぱいに画像を表示させる方法 iPhone編

以前ブログで「CSSで画面いっぱいに画像を表示させる方法」を紹介させていただいたのですが、iPhoneではうまく作動しないため、今日はiPhone版の「CSSで画面いっぱいに画像を表示させる方法iPhone版」について書きたいと思います。

PCやandroidだと、下記のやり方で問題なく作動するのですが、

<style type=”text/css”>
body {
background-image: url(※画像URL);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #ffffff;
}</style>

background-attachment:fixed;
と合わせて、
background-size: cover
を同時に使った場合、iOSではうまく作動しないことに気が付きました。

そこでいろいろ試してみてうまくいったやり方がこちら。

<style type="text/css">
body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background:url(※画像URL) center no-repeat;
background-size:cover;
}
</style>

こちらの方法では、iPhoneでも問題なくフルスクリーン表示が出来ました。
全ページに画像を入れたい場合にはダッシュボードの中にある「追加CSS」に記載してもOKですが、単独ページのみに入れたい場合には、固定ページの中に記載すると良いです。

福島市のホームページ制作ならデザインワークスウェブカラーズ

ウェブカラーズでは、個人事業主様や中小企業者様のホームページを安心価格にて制作させていただきます。検索に強いホームページ制作にするため、できる限りサポートさせていただきます。