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

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

調べてみたら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ヶ月前にうなこが編集しました。

小林さん
もしかしたら私のコピペミスかもしれません…
以下の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;
}
}

小林さん

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

小林さん　こんばんは！

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;
}
}