お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

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

    【CSS】背景画像をウィンドウ横幅いっぱいに広げて表示させる方法|WordPress入門

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

    前回は「画像をコンテンツ幅を越えて画面の横幅いっぱいに広げる方法」を書きましたが、背景画像の場合は同じ方法では上手くいかないようでしたので、別の方法を試してみたいと思います。

    画像をウィンドウ幅いっぱいに広げる

    前回の復習ですが、前回はこのような感じで、画面幅(ページ幅)いっぱいに画像を広げることに成功しました。

    .full-wide-screen{
    margin:0 calc(50% - 50vw);
    }

    前回はこのような感じで広がりました!詳細は前回の記事をご参考ください😃

    背景画像を広げる場合

    コンテンツ上に配置している「画像」とはちょっと状態が違うので、設定に工夫が必要なようです。

    .background-image-wide-full {
    margin:0 calc(50% - 50vw);
    width:100vw;
    }

    ブロックの横幅を「100vw」として画面幅いっぱいに広げました。

    背景画像が画面幅いっぱいに広がりました!!

    まとめ

    「画像」をウィンドウ幅に広げる場合と「背景画像」をウィンドウ幅に広げる場合は、画像の状態が違うので、ページ幅いっぱいに広げたい…となった場合は、ちょっと工夫が必要なようです。

    うーん、奥が深い・・・😃

    次回は、さらに複雑なパターンにも挑戦してみたいと思います。ご参考ください😃

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