ホームページなどでよく見かけるいい感じのトップ画像の作り方

Blog

 

今回、紹介するのは、よくホームページなどで見られるいい感じのトップ画像の作り方を紹介します。

 

完成イメージ

 

 

 

このようなトップ画像を作ります。

 

この方法は他の箇所にも使われていることがよくあります。

 

例えば、問い合わせページの上部にあるヘッダー画像などにも使われているので、

 

一度覚えておけば色々応用が効くので覚えて置いてください。

 

 

 

 

 

 

画像は、各自Googleなどで用意しておいて下さい。

HTML

 

 

  <div class="wrapper">
    <div class="bg-inner">
      <h2>HELLO WORLD!</h2>
      <p>hello world!</p>
    </div>
  </div>

 

CSS

 

 

 

.wrapper {
  background-image: url("bg.jpg");
  background-size: cover;
}

.wrapper h2 {
  color: #FFF;
  text-align: center;
  padding-top: 300px;
  font-size: 50px;
  letter-spacing: 2px;
}

.wrapper p {
  color: #FFF;
  text-align: center;
  padding-bottom: 200px;
  letter-spacing: 1px;
}


.bg-inner {
  background-color: rgba(0, 0, 0, 0.6);
}

 

 

今日のポイント

  • background-imageで背景画像を設置。
  • h2とpタグのpaddingで余白を確保する。
  • background-color: rgba(0, 0, 0, 0.6) で薄い黒色を覆う。

 

 

 

 

今回は、トップ画像以外でもよく使われているいい感じの画像の作り方でした。

 

 

 

🤗

コメント