Results 1 to 2 of 2
May 11, 2012, 11:35 #1
- Join Date
- Sep 2004
- 0 Post(s)
- 0 Thread(s)
cross-browser friendly way to size 100% x/y bkg images in flexible container divs?
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;
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;
thanks in advance for your assistance. :-)