I've got two repeating patterns as background images - one tiles the window background, and the other is the background for several boxes on the page containing text. The latter is a filtered (e.g. desaturated) version of the first so that the text is readable. Something like this:

body { background: url(roses.jpg); }
div { background: url(roses-faded.jpg); }

Since the images have a recognisable pattern, I want the divs to position the repeating image relative to the top-left corner of the page, just as the main background is. (So if a div were in the middle of the repeating pattern, the background on the div would show the middle of the pattern.) Is there a way to accomplish this in CSS?

  • BTW, it so happens that this is in XUL, but I think the same techniques would probably work in HTML or XUL. Grumdrig almost 10 years ago

2 answers


You need to have a static layout for this, because the divs on top of the body need an exact position for this effect. Use Firebug to place the background exactly where you want it.

Another and probably better solution is to have a semi-transparent single-color background for the div.

Example 3 in this article describes that.

Answered almost 10 years ago by Niels Bom
Doug 1095

Try something like this:

body { 
  background: url(roses.jpg); 
div {
  margin: 2em 1em;
  background: url(roses-faded.jpg) repeat -1em -2em;

Basically, you want to position the div background negatively by whatever distance it is positioned from the body. That way, even if the div is not at the top left of the body, the background will still line up.

Answered almost 10 years ago by Doug