お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    スキルアップは今すぐこちら!▶

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

    CSS(シー・エス・エス)
    この記事は約2分で読めます。

    「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と同じような表示にしたい時は、メディアクエリを使って画像を入れ替えるなど工夫が必要です。

    ご参考ください😃

    0 件のコメント

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