【CSS】背景画像を固定したおしゃれなLP(ランディングページ)を作ってみよう

【CSS】背景画像を固定したおしゃれなLP(ランディングページ)を作ってみよう
ランディングページを作るのですか?
ちょっと作ってみましょうー

実装サンプル

See the Pen 【CSS】Fixed background full (Responsive) by 125naroom (@125naroom) on CodePen.

HTML

<main>
  <section>
    <div class="onebox">
      <p>パ</p>
    </div>
  </section>
  <section>
    <div class="onebox">
      <p>ン</p>
    </div>
  </section>
  <section>
    <div class="onebox">
      <p>を</p>
    </div>
  </section>
  <section>
    <div class="onebox">
      <p>食</p>
    </div>
  </section>
  <section>
    <div class="onebox">
      <p>べ</p>
    </div>
  </section>
  <section>
    <div class="onebox">
      <p>た</p>
    </div>
  </section>
  <section>
    <div class="onebox">
      <p>よ</p>
    </div>
  </section>
  <section>
    <div class="onebox">
      <h1>パンを食べたよ</h1>
    </div>
  </section>
</main>
 
<footer>
  <p class="_a"><a href="https://125naroom.com/web/3434" target="_blank" class="link">View the note</a></p>
</footer>
 
<div class="bg"></div>

CSS

背景を固定するのに必要なCSSはこれだけです。

.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-image: url("https://125naroom.com/demo/img/panyasan01.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .5;
    z-index: -1;
}

さいごに

パン柄の服がほしいですー
おしゃれですねー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

7

/

14

2024

Googleさんの
おすすめ

7

/

14

2024

デザインの記事

株式会社High Link
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】スライダープラグイン「slick」実装サンプル集