メディアクエリ - 異なるデバイスのイメージを交換する

Question

私はコーディングが新しく、WordPressテーマの特定の要素を変更する方法を見つけようとしています。その1つはデスクトップ上に完全なLinkedInイメージを表示することですモバイルデバイスでは、より短いロゴ[IN]に切り替わります。

StackOverflowでいくつかの記事を読んでいただきありがとうございますが、この修正によりLinkedinロゴの下にアクションがドロップダウンされました。私はこれが本当の初心者間違いだと確信しています。私は何かが完全に欠けていますが、私の人生はデスクトップとモバイルの両方でLinkedinのロゴの横に行動を呼び戻すことができません。 （私はそれが周囲のdivと関係があるかもしれないと感じているが、ロゴの横にポップアップするためにChrome Inspectで変更できる幅のものは見えない）。

HTML 

<a href="www.linkedin.com" target="_blank"> 
<div class="exampleimage"></div></a> 
<a href="tel:123 456 789">Need Help? Call » 123 456 789</a> 



CSS 
.exampleimage{ 
    background-image: url("http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-Company-LinkedIn-Logo.png"); 
    background-size: contain; 
    width: 140px; 
    height: 18px; 

} 

@media only screen and (max-width: 500px){ 

    .exampleimage{ 
     background-image: url("http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-LinkedIn-Logo-small-version.png"); 
    background-size: cover; 
     width: 22px; 
    height: 18px; 
    } 
} 

screen shot

すべてのヘルプは非常に高く評価されるだろう：コードへの相続人

！

:)

Answer 1

メディアクエリで.jpegが見つからないことがありますか。

background-image: url("Linkedinlogo2.jpg"); 

Answer 2

モバイルで先に行くことをおすすめします。 モバイルバックグラウンドイメージ（.jpg/.jpeg）にファイルタイプを追加しないでください。これはうまく動作しない主な理由です。実際の画像ではなく相対リンクに

CSS 
.exampleimage{ 
    background-image: url("Linkedinlogo2.jpg"); 
    background-size: cover; 
    width: 22px; 
    height: 18px; 
} 

@media only screen and (min-width: 501px){ 
    .exampleimage{ 
    background-image: url("Linkedinlogo1.jpeg"); 
    background-size: contain; 
    width: 140px; 
    height: 18px; 
    } 
}