指定要素部分の背景を画像にして、スクロールしても背景の画像はスクロールされないというものを作っています。
ソースコード(必要な部分)
html
1<html> 2 <head> 3 <style> 4 center.main { 5 background-attachment: fixed; 6 background-image: url(/img/header.png); 7 background-position: center; 8 color: #ebebeb; 9 } 10 </style> 11 </head> 12 <body> 13 <div> 14 <center class="main"> 15 テスト<br> 16 <h1>テスト</h1> 17 </center> 18 </div> 19 </body> 20</html>
しかし、background-attachment: fixed;はスマホだと効かないということを知り、スマホはスクロールしたら画像もスクロールされるというものにすることにしました。
写真は16:9くらいのものです。
写真の縦横比はそのままで要素内で写真がループしてしまわないようにしようと思い
background-size: auto 100%;
としましたが100%は親要素に対する大きさで、親要素は縦に長いのでスマホだと少しの部分しか見えませんでした。
そこで縦を要素自身の高さに合わせ、横は縦横比が合うようにするCSSはないでしょうか。