In HTML/CSS, can you repeat an image in the foreground, like you can in the background?

css, html

Solution

Interesting task. I think this should do it, if you’re willing to put in an extra HTML element. (Alternatively, use `.test:before` instead of `.test .foregroundImage`, like in Georges’ answer).

HTML

<div class="test" id="xyz"><span class="foregroundImage"></span>some code which should come background to image</div>

CSS

.test {
    position: relative;
}

.test .foregroundImage {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  left: 0;
  right: 0;
  width: auto;
  background-image:url('images/smiley.gif');
  background-repeat:repeat;
}

See http://jsfiddle.net/RUJYf/ for a working example.

Problem

This is my CSS ``` .test { background-image:url('images/smiley.gif'); background-repeat:repeat; } ``` This is my HTML: ``` <div class="test" id="xyz">some code which should come background to image</div> ``` The code that I have written sets a background image. But I want to put an image on top of the text, instead of behind it, so that it covers the text. (I also want it to automatically repeat to fill the element, which could be any size.) How can I do that?

Original source