Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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?

like image 858
Maths Gal Avatar asked Aug 08 '12 08:08

Maths Gal


People also ask

How do I make an image repeat in HTML?

You can make your background image repeat across the page (or any other HTML element) by using the CSS background-repeat property. You can also use the background property to set all your background related properties at once. You can make your background image repeat horizontally, vertically, or both.

How do I make an image repeat itself in CSS?

default background-repeat: repeat; The background image will repeat itself both horizontally and vertically. background-repeat: repeat-x; The background image will only repeat itself horizontally.

Is background-repeat a CSS background property?

The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.


2 Answers

This should do the trick. the :before selector creates a fake div with the given content (here a space, because without the content attribute, and I think with an empty string content, the fake div isn't created), and which can be styled. So the fake div is created, and styled with a background-image, a given height and width, and a z-index of 1, while the real div has a z-index of zero and appears below.

<!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>

Combining this with Paul D. Waite's answer avoids having an explicit span in the code.

I thought the :before had to be applied to .test :first-child:before, so it would be a child of the xyz div, instead of being a sibling, but it seems it is not necessary (though it escapes me why).

You can test the result live on 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>
like image 129
Suzanne Soy Avatar answered Oct 13 '22 01:10

Suzanne Soy


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.

like image 25
Paul D. Waite Avatar answered Oct 13 '22 00:10

Paul D. Waite