Streach that Background? — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Streach that Background?

This page's ID: 26397

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Hi, Basically this is all just trying to find a workaround to emulate CSS3's background-size which is unsupported so far. Depending on the image, if you want to have unique top/bottom/left/right sides of the image (e.g. an embossed box / shadows that are different on all sides) then repeat-x and repeat-y won't work on a liquid page. When all my other stuff is positioned with EM's and the image doesn't tesselate (looks screwed up when repeated)... it would be nice to just stretch the background image to make it fill up the full element. So far I tried using layering... similar to the example below only I'm trying to use this technique to fill up a div (or if necessary a table / td) by stretching an image. however if I use height: 100% and width: 100%; its not using the div or td's max height/width, its making the image far too big. Anyway this is an example of what I'm trying to do to stretch a background image, this example is to stretch it for the whole page though, again I'm trying to do this multiple times on the same page to fill up multiple div's with a stretched background image. [code] <html> <head> </head> <body style="margin: 0px; padding: 0px;"> <div style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 0;"> <img src="animage.jpg" style="width: 100%; height: 100%;"> </div> <div style="z-index: 1; position: absolute;"> The actual page... :D </div> </body> </html> [/code] I'm guessing to do this to fill up a div or td then some javascript will be needed to set the img's size to the parent's current size .. I'm just hoping when I figure out how to do that, it will let me specify the size in EM's (I'm pretty sure that it will) so if the font size is changed in e.g. IE or FireFox it will scale the background image along with the rest of the page. So this code doesn't work but I'd like to do something like this: [code] <div id='div1' style='width: 50em; margin: 0 0 1em 0;'> <div id='background1' style="width: 100%; height: 100%; z-index: 0;"> <img id='img1' src='whatever.gif' style='width: 100%; height: 100%;' /> </div> <div id='text1' style='z-index: 1; width: 100%;''> - this text in text1 should appear ontop of the background image background1 - the parent div id=div1 should only be as tall as necessary to contain all this text, however tall it takes, - whatever.gif should be stretched to the right heigth and width to fill up div1. </div> </div> <div id='div2' style='width: 50em; margin: 0 0 1em 0;'> <div id='background2' style="width: 100%; height: 100%; z-index: 0;"> <img id='img2' src='whatever.gif' style='width: 100%; height: 100%;' /> </div> <div id='text2' style='z-index: 1; width: 100%;''> - this text in text2 should appear ontop of the background image background2 - the parent div id=div2 should only be as tall as necessary to contain all this text, however tall it takes, - whatever.gif should be stretched to the right heigth and width to fill up div2. </div> </div> [/code] Now to think of what javascript it would take to set e.g. img1 and img2's height and width to whatever div2's height and width are (which is 100% wide and however tall it takes to have room to show all the text)... hmm :-) Since I'm working in PHP I can use PHP to write the element id names into a javascript function call.. Not sure if I can use this to trigger whatever javascript function is needed? [code] <div id='div1' style='width: 50em; margin: 0 0 1em 0;'> <div id='text1' style='z-index: 1; width: 100%;''> - this text in text1 should appear ontop of the background image background1 - the parent div id=div1 should only be as tall as necessary to contain all this text, however tall it takes, - whatever.gif should be stretched to the right heigth and width to fill up div1. </div> <div id='background1' style="z-index: 0;"> <img id='img1' src='whatever.gif' style='width: 100%; height: 100%;' onLoad='resizeMe(this,"div1");' /> </div> </div> [/code] Then maybe resizeMe could look up div1's position and set img1's styles to, position: absolute and top: div1's top, left: div1's left, width: div1's width in em's, height: div1's height in em's.... Sorry, just thinking to myself, hopefully someone who has written more than the 3 little javascripts I've written so far has some ideas that will actually work :-) Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu