Stuck on how to put a box over a background pattern [CSS/XHTML]

[init.d]

Hello, im trying to code a template I just designed in photoshop.
Im stuck, since the background has a pattern on it, and I have a box that needs to be placed on top, but part of the box has the pattern in there:


How would I do this? I can't do this how I normally would because the pattern wouldn't match up at all resolutions/windows sizes?

 

[GiddyUp]

edit: misunderstood what you wanted.

 

[Presto]

As far as I know you can't do it without pattern miss-match.

And that suggestion above won't do it.

Would love for someone to tell us otherwise though as it's bugged me forever but I never looked for a solution!

 

[RaptorRex]

I would try to do to this using explicit sizes for all the boxes and the margins used to center the main box.

But in consideration of window resizing...
Use javascript to get the size of the client area, the adjust your main box offset (probably margin-left) by a multiple of your tile size in order to line up the pattern but as close as possible to center.

I've never tried this myself but it sounds like a fun exercise

Perhaps CSS allows you to offset your background image...I'm not sure but that would better since your box could then be centered instead. The key is to get your client size and adjust your object locations accordingly.

 

[paaaaaaaaaa]

The box ontop could make use of the alpha channelling in a png image file. Though it will not work in IE. Other wise you could get the pattern to match if the website is aligned to the left.

I think the only way to do it is to set transparency to the image like this:

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5">

or via javascript like this:

ImageObj.style.filters.alpha.opacity=90 //IE syntax
ImageObj.style.MozOpacity=0.9          //MOZ syntax

 

[WhiteWebServices]

If you pm me the psd, I might be able to help. (I need to see a bit more of the design to work out how to approach the problem.)