お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

    【CSS】背景画像(background-image)を横幅100%に広げる方法【レスポンシブWEBデザイン】

    CSS(シーエスエス)
    この記事は約2分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    「CSSで背景画像を画面幅いっぱいに広げたい」という時に使える方法です。背景画像を配置しただけでは、必ずしも画面幅いっぱいに広がる訳ではなく、no-repeatなどを指定した場合、左上の方に1枚ポツンと表示されてしまったりします。

    このような時に使える方法です。

    background-size:100% auto;

    ということで、設定方法は簡単です。

    background-size:100% auto;

    こちらを指定するだけです。

    画面の横幅いっぱいに広がりました!

    「100% auto」の指定で高さは自動調整されて横幅いっぱいに。「auto 100%」の指定で幅は自動調整されて高さがいっぱいに広がります。

    background-size:100% auto;
    background-size:auto 100%;

    あとはheight:でお好みの縦幅を指定してあげれば縦幅の調整が可能です。他は随時指定を。

    まとめ

    ということで「background-size:」を使って「100% auto;」の指定をしてあげることで、横幅いっぱいに広がった状態にできます。

    ただし、この方法の場合は表示幅が狭くなっていったときに、横幅いっぱいなので、背景画像が収まったような状態になります。

    これで見た感じも良くは見えますが、PCと同じような表示にしたい時は、メディアクエリを使って画像を入れ替えるなど工夫が必要です。

    ご参考ください😃

    Loading
    タイトルとURLをコピーしました