Large background image overlay

Hi All,

I am using a jquery plugin for a large website background image and am wondering how one can overlay another image like a pattern over this one??
I created a background image with the pattern already added in photoshop, but when the site is viewed on a tablet or mobile the pattern becomes too large, but I think if I use the pattern as an overlay using CSS this problem might be fixed…

Any ideas?


If you are talking about scaling the background image then the css3 property background-size should do what you want as it will scale backgrounds to match the content -if that’s what you wanted. It’s supported on the iphone but [URL=“”]other mobile support may be patchy.

Hi Paul,

No, I have no issues with scaling the images, the jquery plugin does a good job. I just want to have an overlay of a grid pattern over the background image and struggle to achieve that.

You could try having a full width div around your content with that pattern as a background image.

Hi ralph.m

That could work.
So would I just create a div that is 100% wide and high and wrap all of the page elements, including the current page wrapper, into this one?

Hi ralph.m

It didn’t work…


I think we’d need to see what you are working with so that we can test things out. Do you have a link to the site in question?

It’s hard to visualise exactly what you need and of course will depend on your structure. If you need a background on top of an existing background image then you can’t apply it by a div that is outside. You would need to have a nested element with the new background in place so that it would sit on top.

Perhaps another solution is the absolute overlay technique. You set position:relative on the parent of the element holding your image and then you create an absolute overlay to which you apply your new background image. Using co-ordinates of top, right, left and bottom will ensure the absolute element stays track with the static element but of course you will need to control stacking levels if other content is in the mix. (The middle section of this page uses the absolute overlay technique to create a section that stretches from a point below the header to a point above the footer (and can’t be done any other way). Although the application is different to your requirements the technique is the same.)

It may be easier if we see what you have already before suggesting complicated fixes as they may not be appropriate and something simpler used instead.

No, I don’t have a link to the site, it is not live.
The jquery plugin that I am working with is called bgstretcher

The effect that I want is located here Vegas Slideshow. As you can see, the background images or rather slides have a pattern overlay and I want that. I have tried to set up this particular background script but I am having issues getting in to work- the documentation isn’t very novice friendly.

I’ve had a go at the absolute overlay technique and it is not quite working. Could very well be the fact that I am a novice…
What I did;

I created a new div that is 100% wide and high with relative positioning.
The pattern overlay was applied to the pagewrapper div with absolute positioning, however the pattern overlay is only as wide as the wrapper which is 910px and I need it to cover the whole page to be 100%. When I change the width of the div as you can imagine, the whole layout goes bananas…

Do I need to create another div between the overlay and the pagewrapper?


Excluding IE6 I think you could do something like this:

	background:red;/* add your image here instead of red*/
	opacity:0.5;/* remove this - just for testing red colour */


[B]<div id="fixed-overlay"></div>[/B]
<div id="page" etc.............

I just tried it on the downloaded bgstretcher demo and it seems to do what I think you want :slight_smile:

Hi Paul,

I ended up using another jquery background script that has an built-in overlay option.
Thanks for your help with this, I will definitely try out what you have suggested and get back to you!