is there a way to do this? i found the css3 code on stu nicholls’ site, but it’s yet all that reliable across browsers.
details: i want to place a white background with photo border knockout on all four sides in the container div so the page background peeks through.
edit: here is a test page: http://www.pbn.mtouchette.com/codeTesting.html
i tried it as an “overprint” rather than a knockout using multiple background images but i really want the actual background to continue into the voided areas. plus, that didn’t display in IE (pc):
background-image:url(http://www.pbn.mtouchette.com/wp-content/images/pbNBkgFrayedLeft.png), url(http://www.pbn.mtouchette.com/wp-content/images/pbNBkgFrayedRight.png); background-position:top left, top right; background-repeat:repeat-y, repeat-y;
for the top and bottom fray i used non-repeating bkg images in the haeader and footer divs.
then i found stu’s code for resizing the image, but that didn’t work in ie or safari 4. (sorry, i’m still on a G4 mac and can’t run anything over os 10.4.11):
background-image: url(http://www.pbn.mtouchette.com/wp-content/images/pbnBkgFrayedFull.gif); background-repeat:no-repeat; background-position:center center; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto;
is there an efficient way to do this that will work in all browsers since about 2008?
thanks in advance for your assistance.