Home > ウェブデザイン備忘録 > CSSで横幅いっぱいに背景画像を表示する方法

CSSで横幅いっぱいに背景画像を表示する方法

18.10.27

ウェブデザイン備忘録

大きい要素に以下のcssを設定する。heightはお好みで。

#sample_wrap {
    background-attachment: fixed;
    background-color: #464646;
    background-image: url("images/contents01_back.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 460px;
    margin-top: 200px;
    min-width: 1140px;
    padding-top: 80px;
    width: 100%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

#sample_wrap {

background-attachment: fixed;

background-color: #464646;

background-image: url("images/contents01_back.jpg");

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

height: 460px;

margin-top: 200px;

min-width: 1140px;

padding-top: 80px;

width: 100%;

}

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« ワードプレスで子テーマを設定する方法。

ワードプレスによるＳＥＯ対策 »

関連記事

2019.05.15 wordpress 301リダイレクトでサイト引越しやドメイン引継ぎを行う。
2020.10.07 ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法
2024.06.28 HTML/CSSの基本: 初心者Webデザイナー向けガイド
2018.11.20 フォトショップやイラレで使っているフォントを他のＰＣに引っ越す方法
2019.04.05 動くＧＩＦアイコンがもらえる
2022.06.24 XサーバーをSSL化した後にリダイレクトさせる方法