ヘッダーに画像をつけないで背景画像をそのまま利用した場合

Cocoon設定－『ヘッダー』タブから『ヘッダー背景画像』に背景画像を入れるとOKです。

初期設定で白なのでクリアなどの設定を追加

これって背景画像を入れると、背景色は見えないと思いますよ。

透明にしても白っぽいだけと言うイメージですが、なぜそのように思いますか？そうするメリットを考えたのですが、思いつかなかったので。

以下CSSを追記した感じがヘッダー背景透明です。キャッシュプラグインのキャッシュを削除してご確認ください。

.header {
	background-color: transparent;
}

ちょっと、どのようにしたいのかが僕にはわかりませんでした。
かうたっくさんが書かれた方法が意図とは違うようであれば、もう少し詳しく説明していただけると助かります。

こんな感じで。

ヘッダーに画像をつけないで背景画像をそのまま利用した場合、○○を△△のようにするにはどうすればよろしいでしょうか。

返信ありがとうございます。

イメージのブログURLです。

https://fxbible.biz/

よろしくお願いいたします。

上でも書いたように、もう少し詳しく説明をお願いします。
自分のサイトのどこをどのように変更されたいのでしょうか。
仕様がわからないのであれば、書きようがありません。

今下記URLで背景を変更したのですがヘッダーが白いままです。

https://netwriter.biz

ヘッダーの白い部分ををなくして下記URLのように背景画像だけでやるにはどこを変更すればよろしいでしょうか

ヘッダーに背景画像を入れると大きさがずれてうまくいきません。

https://fxbible.biz/

.header {
background-color: transparent;
}

も特に変化ありませんでした

反映しないのは指定領域が違っているからで。

URLを提示して前後のカスタマイズをどのようにするか具体的に分からなかったですが、やりたい事であろう事は同じようなstyleを入れたかった。とすれば以下のようになると思います。

説明から。

『ヘッダー背景をbodyの背景と同じ画像にしたい』

• それに伴ってサイト名・ディスクリプションのフォントの色をCSSで変更

ヘッダー（上部）のナビについて

• フォントの色・ナビの背景色を変更（ついでにボーダーを入れる）
• ボーダーを入れた際、タブレット以下でボーダーを非表示に（スマホの設定をした際その項目は削除すればOK仕様）
• ナビのリンクの色変更

CSS

/* ヘッダー部分の背景をbodyと同じ背景に */
.header-container {
    background-color: transparent;
}
/* サイトタイトル・ディスクリプションの色を変更・テキストにシャドー */
.site-name-text,
.tagline {
    color: #fff;
    text-shadow: 2px 2px 1px #353434, -2px 2px 1px #222, 2px -2px 1px #222, -2px -2px 1px #222;
}
/* ナビ全部の背景を変更・ボーダーをいれる */
.navi {
    background-color: #000;
    border: 1px solid #fff;
}
/* タブレット以下でボーダー不要：メニューを設置していない人用 */
@media screen and (max-width: 768px) {
	.navi {
		border: none;
	}
}
/* ナビのリンクの色（文字色）の変更 */
.navi-in a {
    color: #fff;
}

https://gyazo.com/16c8bd626ec8b9766b231219f533facf

上ビフォー

下アフター

https://gyazo.com/77b98a67d327d0958ece70315b4bfdd5

.site-name-text, .tagline に関して見にくい場合は、font-weight: bold;などfont-weightを変更したりfont-sizeを変更すればOKかと思います。

あと、スマホのみ・タブレットではなどは…などある場合。子テーマCSS下にあるメディアクエリをうまく使えば良いと思います。

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

大変助かりました