wordpress

WP テキストの背景に写真を表示させる

貴如意さんサイトのトップページ。http://kiraku07.info/
あいさつ文の背景に朝日の写真が表示されています。
WPで、このように固定ページに写真の上にテキストを表示させるには、どうしたらよいのでしょうか?

通常のHTML,CSSの場合はcssのbackground-imgで指定すれば良いのですが、
貴如意さんサイトを見ると写真とテキストは、それぞれdivで囲まれています。

それと、写真はレスポンシブになっています。それには何か指定が必要でしょうか?

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

カテゴリー: 質問と回答 | タグ: , , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

WP テキストの背景に写真を表示させる」への6件のフィードバック

  1. タカハシ先生タカハシ先生

    固定ページなので、本文の編集エリアを「テキスト」にすれば自由にマークアップできます。
    画像入ったpと、テキストの入ったdivでマーアップします。
    pは通常の流し込みで、中のimgにはwidth:100%を指定しています
    divをposition:absoluteにして位置指定をし、pの上に重ねます。
    また、header.entry-header についても、このページに限ってはposition:absoluteにして重ねています。

    返信
  2. 真中のぶ真中のぶ 投稿作成者

    先生。

    やってみました。出来ました!ありがとうございます!
    テキストを囲んでいるdivをwidth:40%で指定しているので、小さいpc画面では、おかしくなるので、
    media Queryで調節ですかね。

    やってみたサイト↓
    http://kuulei90.com/?page_id=25
    画像はopacityで、もう少し薄くした方がよさそう。

    返信
  3. タカハシ先生タカハシ先生

    そのdivの基準ボックスはどこだろう?
    たまたまいい位置に表示されている状態は怖いので、明示的に基準ボックスを指定して、topとleftも指定した方が良いです。

    返信
  4. ピンバック: 2013-5-31 勉強会 | パソコン倶楽部りんご

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA