0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ララベルで背景画像の固定

Posted at

###背景画像の固定
背景画像を固定してあげると文字などの要素だけが動く感じになるのでレイアウトとしてもいい感じになるんじゃないかと思います!
###背景画像の固定のコード
背景画像の固定をするためにはbackground-attachment: fixed;を使うと固定することができますが問題点があります
それはアイフォンではうまく動作しないことです
PCではうまく反映されてましたがアイフォンで確認したところ反映されてませんでした
なので今回はアイフォンでも対応できる方を紹介したいと思います

app.blade.php
<style>
        body::before {
        content: "";
        background:url({{ asset('images/image02.jpg') }}) no-repeat center center;
        background-size: cover;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        transform: translateZ(0);
        }
</style>

images/image02.jpgは自分の画像に合わせて変えてくださいね
###まとめ
うまくできましたでしょうか?
PCの方で確認をしたらアイフォンなどの方でも確認してみてくださいね!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?