これでうまくいくはずです。:before
セレクターは、div
指定されたcontent
(ここではスペース、コンテンツ属性がなく、空の文字列コンテンツでは偽物div
が作成されないと思うため) で偽物を作成し、スタイルを設定できます。そのため、偽物が作成され、 、指定されたand 、およびofでdiv
スタイル設定されますが、本物の z-index はゼロで、下に表示されます。background-image
height
width
z-index
1
div
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
.test:before {
content: " ";
position: absolute;
width: 100px; height: 100px;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/a/a4/Smiley_transparent.png');
background-repeat:repeat;
z-index: 1;
}
.test {
z-index: 0;
}
</style>
</head>
<body>
<div class="test" id="xyz">some code which should come background to image</div>
</body>
</html>
これをPaul D. Waiteの回答と組み合わせることで、コードに明示的なスパンを含めることを回避できます。
:before
に適用する必要があると思った.test :first-child:before
ので、兄弟ではなく の子になりますが、xyz
div
必要ではないようです(理由はわかりませんが)。
結果は jsfiddle でライブでテストできます。
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
.test {
position: relative;
}
.test:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
height: auto;
left: 0;
right: 0;
width: auto;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/a/a4/Smiley_transparent.png');
background-repeat:repeat;
}
</style>
</head>
<body>
Some text before.
<div class="test" id="xyz">some code which should come background to image</div>
Some text after.
</body>
</html>