Bootstrapでレスポンシブのサイトを作っています。
以下の様なコードをindex.htmlの中に記述をしています。
uploads/image-design-5-DH0.jpg 部分が背景画像になります。
HTML
<div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url("uploads/image-design-5-DH0.jpg"); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url("uploads/image-design-5-DH0.jpg")" id="section_2" data-pix-offset="72">
CSS
.pix-hotel-1 { background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../uploads/image-design-5-DH0.jpg'); background-size: cover; background-attachment: fixed; background-position: -330px; -webkit-background-size: cover; background-size: cover; }
image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
これは何が原因でしょうか?
よろしくお願いします。