スマホもパソコンと同じ設定の背景画像にしたいです。

これを、スマホでも同じ設定で背景画像を表示させたいのですがどうすればいいでしょうか？

スマホにあわせ背景画像を用意するとかになるかもしれません。

body.custom-background {
	background-image: url(画像パス);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

多分こんなCSS。固定画像1枚を表示する感じだと思われるので、おそらく対応するなら上記の通りになりそうですが左右は見切れる気もすると想像してますが、詳細がわかりません。

リンクを置いてもらえますか

※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

かうたっく様

ありがとうございます。
URLの記述、失念していました。すいません。

下記のサイト
http://cocoiro.site/

背景の葉っぱの部分になります。
上記のタグをmobile.css に貼り付け、画像サイズ600×400で配置して、キャッシュもクリアしてみたのですが、変化がないようです。

よろしくお願いします。

上記のタグをmobile.css に貼り付け、画像サイズ600×400で配置して、キャッシュもクリアしてみたのですが、変化がないようです。

上のCSSは私がテストサイトで確認したコードのメモで同じだったら再確認しなくて良いかと思ったまでで、メモとしとけばよかったです。失礼しました。

PCビューでも同じですが、ブラウザの上下の高さを狭くすれば、画像の上下が見切れます。左右の幅を狭くすれば、葉っぱがドンドン見えなくなりますよね。

画像サイズを変更の変更ですが、比率を変更ってな感じです。モバイルの高さと横幅の比率がどれくらいか、ちょっとわかりませんが、412×732の比率だったり、375×667の比率で葉っぱが入るように画像を作成するといった感じです。

ちなみにstyle.cssに以下を追記しても良いと思います。ただ画像の比率は『縦長で試してみないと』厳しいかと思われます。

@media screen and (max-width: 639px) {
	body.custom-background {
		background-image: url(https://cocoiro.site/wp-content/uploads/2018/03/238910-P2YFB2-619-1-e1520078123897.jpg);
	}
}

既存の画像を利用してキレイに縦長画像を作る方法を考えたのですが、これっぽちも思い当たりません。もっと長い葉っぱを使って縦長画像を作成すれば可能でしょうけど。

※画像を縦に並べられるような画像のデザインならCSSで対応できるのですが…。

(max-width: 639px)にしてますが、500pxとかでも大丈夫です。微調整するなら、要素の検証（PCからF12キー）で確認できるんですけど…

検索したら沢山ページが出てくると思います。

@media screen and (max-width: 500px) {
	body.custom-background {
		background-image: url(https://cocoiro.site/wp-content/uploads/2018/03/238910-P2YFB2-619-1-e1520078123897.jpg);
		background-position: right;
	}
}

葉っぱが左にあれば、background-positionをleftにしてもらえますか。それから、キャッシュ系プラグインをつかってませんか？

全くCSSが効かないのでJetPackあたりの何かがstyle変更させてくれないんだと思ったり。

Do not modify this file directly. It is concatenated from individual module CSS files.CSS files

これですかね？

さくらですかね。サーバー側でキャッシュ機能があれば一時クリアするなど試してもらえますか。（そんな機能がなければ平気です）

かうたっく様

いろいろ検討していただきありがとうございます。

画像の縦長、タグの設置、サーバー側のキャッシュ機能、試してみます。
少し時間がかかりそうなので、反応をみて、ご報告させていただきます。

キャッシュ系のプラグインは入れていないのですが、JetPackが問題の場合は手立てがあるのか。。。
上記のもの全て試してみます。

ありがとうございます。

こういう方法もあるという提案です。

子テーマの style.css に、以下の CSS を追加します。

@media screen and (max-width: 639px) {
  body {
    background-color: #fff;
  }
  #main {
    background: transparent;
  }
}

葉っぱをもっと見せたい場合には、上記の CSS ではなく下記の CSS を子テーマの style.css に追加します。

@media screen and (max-width: 639px) {
  body {
    background-color: #fff;
  }
  body.custom-background {
    background-position: right -240px center;
  }
  #main {
    background: transparent;
  }
}

1 つ目の CSS との違いは、背景画像に手を加えていること。

background-position の -240px で背景画像を動かしています。
負の値を大きく（ -300px とか ）すると、背景画像は右に動き、葉っぱがどんどん見えなくなっていきます。
逆に負の値を小さく（ -150px とか ）すると、背景画像は左に動き、葉っぱがより見えるようになります。

ただ、この方法が、奥野さんのご要望を満たせるかは分かりません。

かうたっく様、Akira様

ありがとうございます。
上記のものすべて試したのですが、スマホだと、画像の一部分が表示されているだけで、うまくいきませんでした。
大きな画像のほんの一部分を拡大表示されて、スマホの背景になってしまっている感じです。

パソコンだけだと、良い感じに表示はさせることはできるのですが。。。
プラグインの影響とかなのでしょうか？

よろしくお願いします。

奥野さんのご要望とご疑問が、はっきり分かりました。

結論から申し上げると、画像の縦横比を維持しつつ、背景画像をすべて表示するのは難しいということです。

背景画像をレスポンシブに対応させるためには、一般的に以下の 4 つのどれかを選びます。

その 1 ：画像の縦横比を維持しつつ、背景いっぱいに画像を表示する。ただし、画像が画面に入り切らない場合には、画像は切り取られる。
その 2 ：画像の縦横比を維持しつつ、背景画像をすべて表示する。ただし、 1 枚の背景画像を繰り返し表示しない限り、背景いっぱいには画像は表示されない。
その 3 ：画像の縦横比は無視して、背景いっぱいに画像を表示する。画像がつぶれるため、普通は選ばない。
その 4 ：画面サイズに合わせて複数の画像を作り、画面サイズに応じて CSS で指定する。すごく面倒。

通常はその 1 を選びます。現在の奥野さんのサイトも、その 1 の状態です。
だから、画像の一部分のみが表示されています。
どうしてもスマホは画面が小さいため、画像が入り切らないんです。

もし画像をすべて表示するのであれば、その 3 を選ぶといいかもしれません。
その場合には、以下の CSS を子テーマの style.css に追加します。

@media screen and (max-width: 639px) {
  body.custom-background {
    background-size: 100% 100%;
  }
}

普通は画像の縦横比がおかしくなるため、変な画像になってしまいます。
ただ、奥野さんの背景画像は葉っぱだからか、試してみると変には感じませんでした。

Akira様

ありがとうございました。

style.css に記述して、キャッシュなども削除してみたのですが、変わらずでした。
試していただいた時は、正常に表示されていて、こちらで記述しても変化がないというのは、どういう原因が考えられるのでしょうか？

レスポンシブをOFFにしているとかも関係あるのでしょうか？
こちらのプラグインの設定などが影響しているのなら、あきらめようとは思うのですが、どうぞ、よろしくお願いします。

お疲れ様です。サイト見ました。良い画像サイズみつけられましたね＾＾

満足されてないようですけど、良い感じになってると思ったら嬉しくなりました！

http://netakiri.net/uploader/src/up0409.gif
画像の様子※超うごきが早いですが…

style.css に記述して、キャッシュなども削除してみたのですが、変わらずでした。
試していただいた時は、正常に表示されていて、こちらで記述しても変化がないというのは、どういう原因が考えられるのでしょうか？

head内のスタイルが優先順位が高いので、反映させるなら以下のように書くとCSSが反映されます。

@media screen and (max-width: 639px) {
  body.custom-background {
    background-size: 100% 100% !important;
  }
}

レスポンシブをOFFにしているとかも関係あるのでしょうか？
こちらのプラグインの設定などが影響しているのなら、あきらめようとは思うのですが、どうぞ、よろしくお願いします。

関係ないみたいです。個人的には今作成された画像がベストな比率だと思いますが、もっと比率を探せば好みの表示に近づくかも知れないですね。

https://cocoiro.site/wp-content/uploads/2018/03/238910-P2YFB2-619-1-e1520147505557.jpg
512×512

かくたっく様　Akira様

ご丁寧に本当にありがとうございました！
!importantで無事に表示されました！

スマホとPCで違う画像を表示しているような感じになって、逆に良かったかもしれません。

すっきりしました！

かうたっく様
比率もお褒めいただき、ありがとうございます。
色々な画像で、試していきたいと思います。

ありがとうございました！