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でお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート