貴如意さんサイトのトップページ。http://kiraku07.info/
あいさつ文の背景に朝日の写真が表示されています。
WPで、このように固定ページに写真の上にテキストを表示させるには、どうしたらよいのでしょうか？
通常のHTML,CSSの場合はcssのbackground-imgで指定すれば良いのですが、
貴如意さんサイトを見ると写真とテキストは、それぞれdivで囲まれています。
それと、写真はレスポンシブになっています。それには何か指定が必要でしょうか？
よろしくお願い致します。
固定ページなので、本文の編集エリアを「テキスト」にすれば自由にマークアップできます。
画像入ったpと、テキストの入ったdivでマーアップします。
pは通常の流し込みで、中のimgにはwidth:100%を指定しています
divをposition:absoluteにして位置指定をし、pの上に重ねます。
また、header.entry-header についても、このページに限ってはposition:absoluteにして重ねています。
先生。
やってみました。出来ました！ありがとうございます！
テキストを囲んでいるdivをwidth:40%で指定しているので、小さいpc画面では、おかしくなるので、
media Queryで調節ですかね。
やってみたサイト↓
http://kuulei90.com/?page_id=25
画像はopacityで、もう少し薄くした方がよさそう。
そのdivの基準ボックスはどこだろう？
たまたまいい位置に表示されている状態は怖いので、明示的に基準ボックスを指定して、topとleftも指定した方が良いです。
divの親要素sectionにposition:relative;top:0;left:0;の指定をしました。
これで明確ですね！
それは「親要素」のtopとleftをしているだけ。
absoluteしている子要素のtopとleftを指定しましょう。
ピンバック: 2013-5-31 勉強会 | パソコン倶楽部りんご