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をポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

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

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

関連記事

2023.06.20 BackWPupの使い方・復元の仕方
2024.09.10 All-in-One WP Migration 容量の上げ方２G
2018.10.27 デザインセンスの良いフリー画像　
2025.08.05 スマホで横スクロールが出る原因をCSSで簡単に特定する方法
2024.09.20 cssだけで背景画像を右から左へループさせる　
2018.11.13 要素にアニメーションをつける　プラグイン「Shortcodes Ultimate」