#現状
ページを読み込む度に背景画像が変わるwebサイトを制作しています。
下記サンプルです。
サンプル
PCのブラウザで確認すると問題はありませんが、スマホで見ると画像が縦に繰り返す状態になっています。
#現状の画像
#background-repeat:no-repeat;を適用した場合
#実現したい状態
#実現したいこと
画像を繰り返すことなく、スマホの縦サイズに合わせて背景画像を表示したいです。
横サイズに合わせると画像の下が空きになるかと思いますので、縦サイズに合わせるので画像の両端が切れるかと思います。
#ソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>test</title> 9 <link rel="stylesheet" href="style.css"> 10 <script text="javascript"> 11 var wall = new Array(); 12 wall[0] = "0.jpg"; 13 wall[1] = "1.jpg"; 14 wall[2] = "2.jpg"; 15 var rnd = Math.floor((Math.random() * 100)) % wall.length; 16 document.write('<style type="text/css"> body { background-image:url(', wall[rnd], '); } </style > '); 17 </script> 18 </head> 19 20 <body> 21 </body> 22 23</html>
CSS
1body { 2 background-position: center; 3 background-attachment: fixed; 4 background-size: cover; 5}