0

背景画像を適切に配置する際に問題があります。デスクトップ上で動作し、電話機をシミュレートするためにウィンドウのサイズを変更しても正しく表示されますが、実際に携帯電話(Android/ChromeおよびiOS/Safariでテスト済み)でウェブサイトを実際に訪問すると、プロパティ。問題のCSSバックグラウンド位置がモバイルで動作しない

CSS:

.blur { 
     background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
     rgba(43, 43, 43, 0.1), 
     rgba(43, 43, 43, 0.1) 
    ), 
    /* bottom, image */ 
    /* BACKGROUND IMAGE */ 
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg'); 
    background-attachment: fixed; 
    background-position: -350px -150px; 
    background-position-x: -350px; 
    background-position-y: -150px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-color: #2b2b2b; 
    overflow: auto; 
} 

@media (min-width: 40em) { 

.blur { 
     background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
     rgba(43, 43, 43, 0.1), 
     rgba(43, 43, 43, 0.1) 
    ), 
    /* bottom, image */ 
    /* BACKGROUND IMAGE */ 
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg'); 
    background-attachment: fixed; 
    background-position: -350px 0; 
    background-size: cover; 
    background-repeat: none; 
    } 

@media (min-width: 50em) { 

    .blur { 
    background: 
     /* top, transparent blue, faked with gradient */ 
     linear-gradient(to right, 
     rgba(43, 43, 43, 0.1), 
     rgba(43, 43, 43, 0.1) 
    ), 
     /* bottom, image */ 
     /* BACKGROUND IMAGE */ 
     url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg'); 
    background-attachment: fixed; 
    background-position: -250px 0; 
    background-size: cover; 
    background-repeat: none; 
    } 

私は解決策を検索して過去の人々を助けた2つの提案を見つけた:助けにはならなかったbackground-position-xbackground-position-yを追加する、とのうち、背景画像を動かしますbodyと、これもまた助けにならなかった別の容器(この場合は.blur)に入れてください。

ウェブサイトは:https://suzannecowan.ca/です。

アドバイスをいただきありがとうございます。

+0

'@media(min-width:)'のピクセル量を使ってみましたか?私はその目的のために使われた「em」を見たことがありません。 – theblindprophet

+0

@theblindprophet私はいつもそれのために 'em'を使っていましたが、以前は問題がなかったのですが、あなたが示唆したように変更しました。 –

+0

特にイライラしているのは、私がshaun-francis.comで同じテクニックを使用していて、完璧に機能していたので、私は今何が間違っているのか分かりません。 –

答えて

1

bg画像をcoverに設定すると、画面の高さまで伸びたがっていることを意味します。これは、小さなデバイスでは非常に狭い視野が得られることを意味します。個人的には、画像を大きくして細かくすることで、モバイル画面上でよりうまく収まるようにするか、代わりに背景サイズを100% autoに設定します。

+0

ありがとう!これはうまくいった。私はバックグラウンドのサイズを変更し、携帯電話のためのバックグラウンドの位置を削除し、それは正常に動作します。私が背景画像をスクリーン全体に塗りつぶす必要がある場合(このことが 'カバー'を使用していた理由)、このケースでは画像が塗りつぶされないかどうかは関係ありません画面全体を縦に並べると、この解決策が機能します。 –

+2

Cool。私は今日も「あなたはバックグラウンドの固定とバックグラウンドサイズを使うことはできません:画像がビューポートだけでなくコンテンツ全体に広がるように、iosで一緒にカバーすることはできません」(これは長く続く問題です)。実際のバグにも反対していました。 –

0

Android/Chromeでは、背景が配置されています。値を変更すると、画像が移動します。また、Chrome(モバイル)Webデバッガを使用して確認することもできます。

モバイル/デスクトップの違いは、2人がこれらの長さ単位をどのように扱うかの違いからです。

関連する問題