Cross-browser friendly way to size 100% x/y bkg images in flexible container divs?

HTML & CSS
1

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. :slight_smile:

michelle

2

IE is always going to be a jerk :confused:

anyway, if I understand what you are trying to do correctly, this should work, even if it’s not as pretty as CSS3… CSS3 , learn it… love it…

anyway

  1. is to make two containers.
 <div class="wrapOut"><div class="wrapIn">Your content</div></div>

we will use this to generate pseudo elements , which wont work on IE … but we’ll deal with that later.

  1. The CSS would then be something like this:


.wrapOut{ position: relative; padding:10px;}
.wrapOut:before, .wrapOut:after, .wrapOut.before, .wrapOut.after,.wrapIn:before, .wrapIn:after, .wrapIn.before, .wrapIn.after { content:""; position: absolute; z-index: 10; background: pink;}
.wrapOut:before, .wrapOut:after, .wrapOut.before, .wrapOut.after{height:10px; left:0; right:0; background-repeat: repeat-x;}
.wrapIn:before, .wrapIn:after, .wrapIn.before, .wrapIn.after {width:10px; top:0; bottom:0;background-repeat: repeat-y;}

.wrapOut:before,wrapOut.before{background-image: url(top.png);  top:0;}
.wrapOut:after, .wrapOut.after{background-image: url(bottom.png);bottom:0;}
.wrapIn:before,wrapIn.before{background-image: url(left.png);left:0 }
.wrapIn:after, .wrapIn.after{background-image: url(right.png); right :0 }

in a conditional for IE you’ll need:


.wrapOut, .wrapIn{
	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);	

  zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('afterBegin','<span class="before"></span>')
	);
}

That works only for IE PC tho …:confused:

If for some ODD reason you still need to support IE mac… then you will just have to make the spans class=“before” and after yourself , in the mark up.

after all this, the conrer’s will still look kinda sharp… ( this would have happened with overlaying multiple bgs anyway. )

the way i deal with this to prevent the 4 elements from actually meeting completely ( so instead of top: 0/bottom: 0… and so forth I use top:2px ; bottom 2px… )… or you could add another wrap to create corner elements. being careful about css cascade.

hope that helps

BTW
the reason your first div didnt get any images is because you have some typos in your CSS…

the image urls should be:

   http://www.pbn.mtouchette[B].[/B]com/wp-content/images/pbNborderLeft.png" and "http://www.pbn.mtouchette[B].[/B]com/wp-content/images/pbNborderRight.png

you had :

  http://www.pbn.mtouchette[B]/[/B]com/wp-content/images/pbNborderLeft.png" and "http://www.pbn.mtouchette[B]/[/B]com/wp-content/images/pbNborderRight.png

(slash instead of a period before the dot com)