WordPress個別サポート

WordPressで作成するサイトには背景画像を入れることができますが、前面のテキストや画像と重なって見づらくなるので背景画像のみを透明にしたいこともあります。

たとえば、次のようなホームページに背景画像を入れてみます。

背景画像を入れる前のホームページ

背景画像を入れる前のホームページ

「背景」メニューから背景画像を入れることもできますが、将来的にいろいろとカスタマイズすることを想定して次のようなCSSを使って背景画像(background:url)を指定しても良いでしょう。

body {
    background: url(bg.jpg) top;
}

大きめの写真や風景画像などを指定すればサイト全体のイメージ画像にもなりますが、通常は背景画像の色が強すぎてしまうでしょう。

背景画像の色が強すぎる

背景画像の色が強すぎて文字が見づらくなる

背景画像を適当に透明にすれば良いのですが、次のように「opacity」を使うと前面のテキストも含めて全体的に薄くなってしまいます。

/* opacityで背景を薄めてみると… */
body {
    background: url(bg.jpg) top;
    opacity:0.6;
}
opacityではサイト全体が薄くなってしまう

opacityではサイト全体が薄くなってしまう

その場合、子要素に対して「rgba」を使って背景色の透明度を指定する方法があります。

※上記の「opacity」は削除する必要があります。
※以下はBizVektorの例です。

/* 子要素に対して透過を指定 */
#header,
#main {
    background-color: rgba(255, 255, 255, 0.6);
}

これにより、背景画像のみが透明になり画面にうっすらと背景画像が見えている状態になります。前面のテキストや画像は影響を受けません。

背景画像のみが透明に

背景画像のみが透明に

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
トラブル解決でお急ぎのときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • ログインできなくなった
  • 画面が真っ白(500エラー)になった
  • 間違ってサイトを消してしまった
  • 引っ越し・SSL対応がうまくいかない
  • CSS・PHPのカスタマイズがうまくいかない
WordPress個別サポートの連絡先

WordPress個別サポートへの問い合わせWordPress個別サポートの申し込み

関連記事

スポンサーリンク