stretching an image 3

[1DMF]

if you have an image as a background and the container div has content that stretches the div larger than the image size, how do you make the image stretch in proportion to the div and the content?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

You can't. There's no way backgrounds can stretch. They can repeat, but they cannot stretch. I suppose you could work around this but I wouldn't bother for a background.

 

[ChrisHunt]

You can't. Background images will repeat, but they don't stretch.

You might be absolutely able to position an <img> on a page and then lay out the page contents on top of it, but it would be tricky to code and probably not worth the effort.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

so you cannot make a design, that uses a background image, that also allows for fluid, accessible and compliant.

that sucks, oh well I guess if I make the rest fluid and conform to accesibility if the writing on the image becomes unreadable, hey ho, chit happens, it's not really going to effect the usability or functionality of the site which is the main thing - isn't it?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[cLFlaVA]

just a thought-

you could absolutely position an element on top of another absolutely positioned element. the lower element could contain (or be) an image with a scalable width/height. the higher element could be your text (or whatever you wanted as a background). however, this seems a little silly to me, and users w/o the capability of css would wonder what the hell was going on...



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[1DMF]

and users w/o the capability of css would wonder what the hell was going on...

not sure who these users are or how they found my website

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

you cannot make a design, that uses a background image, that also allows for fluid, accessible and compliant.

Yes you can, but you have to be a bit devious about it. Specifically by using small tiled images that will look like one big one. Take a look at the background of

http://www.casaisobela.com

for example - no stretching there, just canny tiling.

Having an image that stretches anywhere from a tiny mobile phone to a massive 2000px plus monitor is gonna look rubbishat one extreme or the other. Maybe that's why they stop you doing it.

I can see practical applications for "background-repeat: stretch" - navigation button backgrounds, for instance - but it doesn't exist so there's no point whinging about it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

CSS 3 provides a "background-size" property, but no browsers support that at the moment, AFAIK.

If you're OK with IE-only, you could look at using the AlphaImageLoader filter with the "sizingMethod" property set to "scale" (possibly other filters would work, too)... although I've not tried the method.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

FYI:

http://www.w3.org/TR/2002/WD-css3-background-20020802/

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

Thanks Dan, when will CSS3 be released, or i guess more importantly supoported by browsers?

I don't think I'm really that bothered about stretching the image for my current project, I've made it more accesible than it was and the page is more fluid if font size is changed, so am pretty pleased with that.

Rome wasn't built in a day, and I've got a lot more to learn yet, but I've come a long way already, so it's not all bad




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.