サイズに関係なくdivをカバーする背景画像を取得する方法についてフォーラムを読み、「background-size」CSSプロパティを発見しました。これは宝石であり、Firefoxで美しく機能しますが、残念ながら私はIE8が標準である大企業で働いています。ブラウザは「背景サイズ」を認識しないため、目的の効果を得るためにチートする必要があります。
2つのdivをレイヤー化しようとしています。1つは画像がimgタグのdivに収まるサイズで、もう1つはスーパーインポーズするテキストが含まれています。独立して、両方のdivは正常に機能していますが、階層化はまったく行われていません。それらは次々に現れ続けます。
z-index値、絶対位置と相対位置の組み合わせ、フロートなどでテストしましたが、うまくいきませんでした。明らかな何かが欠けているに違いないように感じます、そしてもう一組の目が大いにありがたいです。
最新のCSSは以下のとおりです。
.case-background {
margin-left: 93px;
margin-right: 93px;
border: 1px solid #665546;
}
.case-background img {
height: 100%;
width: 100%;
position: relative;
z-index: 0;
}
.case-text {
margin: 12px;
padding-left: 35px;
padding-right: 35px;
border: 1px solid #665546;
font-family: Arial, Helvetica, sans-serif;
color: #665546;
border: 1px solid #665546;
font-weight: normal;
background-color: #FFFFFF;
position: relative;
z-index: 1;
}
HTMLは次のとおりですが、ヘッダー情報とhtml、head、bodyタグなどは含まれていません。
<div class="case-background">
<img src="images/test.jpg" />
<div class="case-text">
<h2>testing header</h2>
<p>testing paragraph</p>
</div>
</div>