見出しから背景画像がはみ出るようにすることは可能でしょうか？
イメージとしては見出しバーがあって、その見出しバーの先頭に
人のような画像がひょこんと載っているという感じです。
■
■-------見出し--------
こういったものを作る場合はcssのbackground-imageではなく、
htmlの方でimgタグを見出しのところにいれてあげて、
cssでposition調整をするしかないのでしょうか？
または、そもそも見出しの縦幅を飛び出る画像分、余分に取ってあげて、
テキストが表示される位置をcssの方で下の方に調整してあげるとか？？？
みんなの回答 4 件
ヒント：ネガティブマージン、擬似要素でゴニョゴニョ
imgタグよりは擬似要素に人物指定してあげて、position指定でbottom:0のほうがアウトライン的にも良いと思う。
装飾的な問題よりも先に、構造的な問題から解決したほうがいいよ。
その見出しと自分物画像の関係、もっと分かりやすく言えば、Googleなどの検索結果にその画像の情報を含めるかどうか。
見出しに対して、ただのリストマーク的な扱いの場合は、検索結果に関与する必要がないので擬似要素や背景画像で代替できる。
画像を情報として検索結果に伝えるべき場合は、figureとかでセマンティックに構造化する必要があるよね。その場合は、親要素に対して、position:absoluteで位置調整するだけかな。
遅くなりましたが、無事、対応できました。ありがとうございました！
関連するトピックス