ヘッダー画像と背景画像等を画面幅いっぱいにしたい

  • 解決済 stargriffin

    (@stargriffin)


    4年、 6ヶ月前

    BusinessPressを使用して企業サイトを構築しております。

    表題の通り、ヘッダー画像や背景画像を画面幅いっぱいに設定したいのですが、
    どのようにしたらよろしいのでしょうか？

    試したのは以下になります。
    １．幅1800pxの画像をアップロード->余白が出来る
    ２．functions.phpに
    add_filter( ‘businesspress_custom_header_args’, function( $args ) {
    $args[‘width’] = 1800;
    return $args;
    });
    を追加し、画像をアップロード->変化なし

    ブラウザキャッシュも削除してみましたが、プライベートモードでも表示は変わりません。（余白ができる）

    以上になります。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • ishitaka

    (@ishitaka)

    4年、 6ヶ月前

    こんにちは

    BusinessPress テーマのデフォルトの状態では、ヘッダー画像は画面幅いっぱいに表示されると思います。
    テーマのカスタマイズ（CSS を追加など）やプラグインのスタイルの影響かもしれません。カスタマイズ内容を確認したりプラグインを停止してみたりしてみてください。

    ヘッダー画像に関しては、下記 CSS で全幅で表示されるかもしれません。

    #masthead .home-header,
#masthead .jumbotron {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}
    トピック投稿者 stargriffin

    (@stargriffin)

    4年、 6ヶ月前

    @ishitaka さま

    こんにちは。
    CSSにいただいた内容を追記したところ、全幅で表示されました。
    ありがとうございます。（今度はヘッダー・フッターとのバランスが崩れてしまったのでヘッダー・フッターを調整できないか調べております）

    テーマにはCSSを少し追加しているので、そちらも外してどうか調べてみます。
    なお、プラグインについては全部OFFにしてみましたが幅は変わりませんでした。

    ishitaka

    (@ishitaka)

    4年、 6ヶ月前

    ヘッダー・フッターとのバランスが崩れてしまったのでヘッダー・フッターを調整できないか調べております

    body タグあたりのスタイルを変更されたのではないでしょうか？
    動作を確認できるページの URL をお知らせいただくと解決が早いかもです。

    トピック投稿者 stargriffin

    (@stargriffin)

    4年、 6ヶ月前

    @ishitaka 様

    お手数をおかけいたします。
    こちらになります。
    https://www.marufuji-kanko.com/

    どうぞよろしくお願いいたします。

    トピック投稿者 stargriffin

    (@stargriffin)

    4年、 6ヶ月前

    @ishitaka 様

    自己レスです。
    bodyタグを確かに変更していました。
    フローチャートのCSSを設定しているのですが、その中で
    bodyタグの項目がありました。

    body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    これを削除することで画面幅がなおりました。

    ishitaka

    (@ishitaka)

    4年、 6ヶ月前

    解決されたということでよければトピックのステータスを「解決済み」にしてくださいね。

    トピック投稿者 stargriffin

    (@stargriffin)

    4年、 6ヶ月前

    ありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「ヘッダー画像と背景画像等を画面幅いっぱいにしたい」には新たに返信することはできません。