PC、スマホの画面幅で背景画像を切り替える方法を教えて下さい。

Question

###前提・実現したいこと

レスポンシブレイアウトを勉強中の初心者です。
@mediaを使ってPCとスマホの画面幅を切り替えと
背景画像を切り替える方法を試しています。
不足しているソースや背景画像の設定方法を教えて下さい。

###発生している問題・教えていただきたいこと

・PC画像の背景画像は横幅１００％だが、高さは３５０pxで指定
 したい場合の％ではどのような記述をしたら良いでしょうか？

・PX→％のわかりやすい算出方法を教えて下さい。

・767がPC幅としてこれからスマホの横幅350pxを加えるには、
 どのような記述をしたらいいでしょうか？

・PCの想定している背景画像サイズ 横1600PX × 縦350px
 SPの想定している背景画像サイズ 横350PX × 縦200px

###該当のソースコード
.cc-imagewrapper {
display: block;
/* height: auto!important; */
margin: 0;
max-width: 100%;
text-align: center;
width: 100%;
height:350px!important;
}

.jtpl-header__container a img {
width: 1030px;
max-height: 350px!important;}

@media (max-width:767px)
{

.cc-imagewrapper {

 height:200px!important;

}

}

###試したこと
現在PC用の３５０pxと指定すると、SPでも高さが３５０pxになり、
SPでは画面の高さが長く感じるので、２００px程に抑えたいです。

###補足情報(言語/FW/ツール等のバージョンなど)
こちら、WEBサービスの「jimdo」を一部をカスタマイズしているため、
バッティングする箇所がある場合は!importantを使用しています。

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

スマートフォンの解像度って機種によってバラバラです。
どこに表示するかにもよるのですが、背景画像を固定幅にするのはあまりいいとは言えません。

mediaの使い方については下記が参考になるとは思いますが・・・
・レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた
・Media Queriesの基本的な実用方法と書き方

あとはmax-widthとかmin-widthとかをうまく使って調整すると良いかもしれません。

・PX→％のわかりやすい算出方法を教えて下さい。

pxと%では基本的な概念が違うので基本的には算出は無理ではないでしょうか。
pxは固定幅にするために使うものですし、%は親要素にあわせて伸縮するものですし。

Answer 2

.cc-imagewrapper {
    background: url(hoge.jpg);
    background-size: cover;
    height: 350px;
}

@media screen and (max-width: 767px) {
    .cc-imagewrapper {
        background-image: url(huga.jpg);
        height: 200px;
    }
}

幅100%、高さ350pxないしは200pxの範囲を背景画像で覆うように表示する
と捉えると、サイズを決めた上でbackground-size: coverではいかがでしょうか。

PC、スマホで背景画像を差し替える際には感覚通りにbackground-imageを変更すれば大丈夫です。