Outerブロックの背景画像について

[小林]

ご教示ください。
WordPress 5.2.4 (Lightning Pro テーマ)

Outerブロックの背景画像がPCから見るといい感じなのですが、スマホから見ると拡大されすぎてしまい、何かわかりません
スマホからのアクセス時に背景を変更することはできませんか？

背景画像の位置
固定

レイアウト設定
全幅

コンテンツエリアの余白 (左右)
コンテンツエリア内の左右に標準の余白を使用しない（全幅で利用の場合など）。

余白 (上下)
標準の余白を使用しない（スペーサーブロックなどで独自に指定する）。

[うなこ]

解決策ではないのですが…

調べてみたらcssの
background-attachment:fixed;とbackground-size: cover;を同時に使うと効かなくなるようです。
background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう

こちらの記事に紹介されているbefore要素で高さを固定のpx指定にすれば、なんとかできそうな気はしますが、
ちょっと高さが固定しなくてはいけなかったりと…スマートではないので…
スマホサイズのみ、背景固定の指定をunsetしてみる方法でいかがでしょうか…？
追加cssなどに以下のcssを貼ってみて下さい。

@media (max-width: 767px){
.vk_outer-bgPosition-fixed{
background-attachment:unset !important;
}
}

確かにスマホサイズの画像が設置できればいいのかもしれませんね
解決策ではなくてすみません…💦

• この返信は5年、 1ヶ月前にうなこが編集しました。

[小林]

una 様
回答ありがとうございます
カスタマイズの追加CSSに教えて頂いたCSSを貼ってみましたが特に変化はなく改善はされませんでした
背景固定されません

少し話は変わりますが、
作成しているページですが、サイドバー無しにしてOuterブロックの背景画像を全幅表示しているため、横長の画像を使っています
そうするとスマホ等の縦長で見ると拡大されすぎています
横長の画像を使っているのでスマホ用の画像が設定できなければある程度綺麗にできないのは納得できます

画像のデザインが右寄りなので画像の右側が残ればある程度見れるようになると思います
しかし背景画像が拡大されていくときに画像の右側が削られていきます
これを左から削られていくようにすることは不可能でしょうか？

• この返信は5年、 1ヶ月前に小林が編集しました。

[うなこ]

小林さん
もしかしたら私のコピペミスかもしれません…
以下のcssでいかがでしょうか？

@media (max-width: 767px){
.vk_outer-bgPosition-fixed{
    background-attachment: unset !important;
}
}

> 画像のデザインが右寄りなので画像の右側が残ればある程度見れるようになると思います
背景画像を右寄りにするにはbackground-positionで指定できます。
上記のcssが効かない場合は以下のcssでいかがでしょうか？
（right centerは右寄りの上下に中央ぞろえという意味です。background-positionで検索してみると、
使い方がでてくると思います）

@media (max-width: 767px){
.vk_outer-bgPosition-fixed{
	background-position: right center !important;
}
}

[小林]

una 様

早速の回答ありがとうございます

上のCSSを貼り付けたところ特に変化は無く、背景固定はされません。

下のCSSを張り付けたところ背景は右が残るようになりましたが、背景は固定されません。

カスタマイズのプレビュー画面？をスマホサイズにしたときは固定されているのですが、実際にスマホで見ると固定されません。

文字で説明するのも限界を感じてきたのでテストページのURLを貼っておくので見て頂けないでしょうか？
現在は上のCSSを貼ってあります
http://kobayashi.ibis-b.com/vision/

[うなこ]

小林さん

この背景画像を右揃えにしてスマホで見た時も固定にしたい、ということですね。
ちょっと今からですと時間がないので明日みてみますね。

[小林]

una 様
ありがとうございます
そのページはいじってしまうかもしれないので、こちらのページで見て下さい
よろしくお願い致します

http://kobayashi.ibis-b.com/testpage/

[うなこ]

小林さん　こんばんは！

OS Safariで固定（background-attachment: fixed;）が効かないみたいですね…
実機でみたら固定されていませんね。。。

以前ご案内したサイトのbefore要素を使って実装する方法を試してみました。
background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう

↓こんな感じでいかがでしょうか？
[注意]画像のURLのところだけ実際の画像のURLにかえてください。（http://○○○○.jpgの部分）

★max-width: 1024px　でタブレットサイズから適応されるようになっています。
★height: 100vh;　で要素の高さ100％になっています。好みで数字を変えていただいても大丈夫です。

@media (max-width: 1024px){
.vk_outer-bgPosition-fixed::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),url(http://○○○○.jpg) no-repeat right center;
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  transform: translateZ(0);
}

.vk_outer-bgPosition-fixed {
    background:none !important;
}
}

[小林]

una 様

指示して頂いたCSSタグで解決致しました。
右寄せ左寄せ等は様子を見ながら調整してなんとかなりそうです
ありがとうございました！

[投稿者]

投稿