125naroom / デザインするところ(会社)です。

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

背景画像を固定したおしゃれなLP(ランディングページ)はこちら

さいごに

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

関連記事

【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)