Topic: Streach that Background? (Page 1 of 1)

I looked up all the definitions- but I can't find this being possible.

But it must be, it must!

How do you make a background stretch?

How can I make a 256x30 image stretch to fit the full width of a DIV?

I got the background properties:
background-color
background-image
background-repeat
background-attachment
background-position
...And I thought background-repeat: stretch; might do the trick, but it's lies! All lies!!

With CSS 2.1 you don't.

You'll have to wait for CSS 3 and the mighty background-size property.

yeah, everything I'm digging up is saying that it can't be done.. I *hate* roadblocks like that...

I figure I'll put the background as just an <img> and stretch that..

.... any suggestions on how to put the text over the <img>?

That gets a little complicated with positioning - you'd have to use absolute positioning to set another div at the same place as the one with the image, and use z-index to set the stacking order.

But - why??

The loss of quality alone would be enough, in most cases, to make this not a viable option.

And even that isn't an issue for you, surely there are better ways to acheive what you want then stretching an image?

Depends on the image, of course, but usually stretching isn't too bad on quality - what it is bad on is website speed...all that rendering exercise slows down the browser.

But let's have an example of what you want.

well, I have a scan-lined gradient that's width:100% with some text on the left side.

I was just going to repeat the northern-most 2px over and over until I saw how nifty it looked with a dropshadow from the layer above. Well- I didn't want an 800px X 30px image on a local html page that I wanted to load instantly and it occured to me that a gradient is only 256 colors anyway so stretching the image doesn't look bad at all. So, I settled for a 256px x 30 image to stretch because not only would it be a smaller filesize, but the resolution would remain liquid as well.

So, now I put the former background as an <img> tag with 'width:100%', but the text on the left over the image (obviously) doesn't naturally fall over the over the gradient but instead to the right. I figured I could 'absolutely position' the text on top of the gradient without setting a 'top' and 'left'. In other words- I want to absolutely position the text div relative to the container div (the one that I put the <img src="grad"> in). Can I do this?

Is that too complicated?

Is this even the best way to do this? I'm only making this page to run off the network server here to make my job a lot easier (I wrote some things in JS to make some daily tasks easier) and now I want the page to be a bit more stylish (can you tell that there aren't many ways to relax around here?). I want this page to load up as fast as digitally possible because I use it for mission critical stuff. Is the filesize reduction worth the added rendering time (in terms of bootup time)?

In the end, that's all that really matters. I can have a 10Mb's worth of html and pictures as long as it loads instantly.

Something like this?:
http://reisio.com/temp/stretch/

Yeah, but see-

#content {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border: 2px solid #00bbff;
background: #ffffff;
opacity: 0.5;
overflow: auto;
z-index: 1;

I want to leave the layer to the north open to expansion..

P.S- cool scrollbox without javascript or frames... Bonus Points!

(Edited by Petskull on 08-07-2005 17:05)

"the layer to the north"?

yeah, I just don't want to confuse it with (the layer I want over the gradient). By 'the level to the north' I mean (the layer closer to the top of the screen; the one with the same z-index as the gradient)

Not understanding you at all.

There is body, on top of body there is #background, on top of #background there is #content.

(Edited by reisio on 08-07-2005 17:27)

This sound like a job for ASCII!!

-----[top of browser]---------
|   1
--------------
|   2 Gradient
--------------
|   3
--------------

I want to put a layer over (closer to the user) the layer 2.

I want to do this without absolutely positioning it in case Layer1 grows.

I can't believe I'm having such a tough time explaining this..

Okay, so you'll be using the default scrollbar over to the right?

...but you still want the gradient to cover the entire viewport (with the other layers above it), aye?

I'm missing something here.

Why would you want to stretch that image rather than using a repeat-x to tile it across the screen?

.



-- not necessarily stoned... just beautiful.

hyperbole: repeat-x would do the trick horizontally since the image is a vertical gradient, but the gradient wouldn't fit the whole height.

The gradient goes from 'white to black' from the left side of the screen to the right side of the screen with a bit of bluish tint.

It has scanlines and a dropshadow from Layer1. I think this is really the best way to shrink the image.

The thing is overlaying the text over the stretched gradient... without making the text layer abso-positioned... I think I'm about to give up on this one and go with absolute position.

P.S- forget about the scrollbar- I only mentioned it because it was a neat trick in the page you made... this has nothing to do with scrollbars... neat trick- doing that without JS, that is...

(Edited by Petskull on 08-08-2005 20:14)

I get the distinct feeling you're talking in Dreamweaver lingo.

I'm still not sure what you want, but I'm sure it can be done.

Can you show us an example here? The more you explain, the more confusing it becomes.

As for the scroll bar - that's just basic CSS 'overflow:auto;'
Nothing fancy or tricky...

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.

<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>

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:

<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>

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?

<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>

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 :-)