10 replies to this topic

[Slightly Wonky Robob]

OK problem and a half here...

I know there is no magical way of stretching a background image (in html/php), mainly due to the fact how ugly that would look in most cases, however in some cases it may not, for example mine, a gradient.

Now the thing is I can get the gradient to tile on the x-axis that's no problem, however it must stretch at least on the y-axis to match the rest of the images. I can do this using a normal image and setting the width and height to 100%... however this poses another problem, i cant put text on without creating other problems, for example leaving a gap at the bottom, making the image way too big or dividing by 0 (ok last one hasnt happened yet )

Hopefully this screen shall help: http://img507.imageshack.us/img507/7891/10...07000053wk4.jpg

now you can see the bit above 'hi', i want this to stretch to the bottom, which wouldn't be a problem in this case, however i have only used that height as a template/test, i want the height to change depending on the text inside the. Yeah I'm really not making it easy for myself

Anyhoo, any suggestions?

EDIT: Small note, the image is located within a cell of a table.

[Sgt. Rho]

fix the link, it doesn't work

So you want to stretch the bg-pic to the bottom? Tryed using CSS?

[Slightly Wonky Robob]

Link fixed

and a small note, i've decided for the time being to give the box a fixed size (and just added a scroll box), but of course i would prefer adaptable sizes

[Felix Lockhart]

Unfortunately, there isn't really a way to do that with CSS. You can repeat the background, but you can't stretch it.

Personally, I don't think gradients as backgrounds for text look very nice, but if that's what you want to do, you're pretty much stuck with a fixed size. There is a way to do a gradient background using colour codes, but it only works in IE.

Another option is to have your gradient at the top of the object, pretty much exactly like you have it now, and make the background colour of that part of the page match the bottom colour of your gradient. This gives the gradient effect, while still allowing variable sizes, and if the text extends beyond the bottom of the image, it doesn't look hideous. Or, make the gradient image symmetrical, and repeat both X and Y. If you do that with a diagonal reflected gradient, it'd make a much nicer appearance than a regular horizontal gradient, in my opinion.

[Sgt. Rho]

there is only one way...imagemagick. You have to use that tool to stretch the pic to the boxes size...

[Slightly Wonky Robob]

2 things... stretching the image isn't the problem, making the image react to the size of the window is... and secondly, regular php image functions would be better than using imagemagick.

[Felix Lockhart]

Bob, on 30 Oct 2007, 20:31, said:

2 things... stretching the image isn't the problem, making the image react to the size of the window is... and secondly, regular php image functions would be better than using imagemagick.

How exactly could PHP interact with an already-rendered box like that?

After further reflection (and a few more sessions of my javascript class), a javascript might be better suited for this. I know it's possible to resize images with JS, I've seen it done before. Just get the dimensions of the box, and resize the background image to match. If I get bored or something I'll throw together a sample for ya :-)

[Felix Lockhart]

Alright, sorry for the double-post, but I have a solution to your problem. I did a full write-up here, with a live example, and a downloadable ZIP file with the files. Enjoy!

http://www.lupinia.n...s/bg_resize.php

(If you like it/use it, a link back to my site would be awesome :-) )

[Slightly Wonky Robob]

nice work

a small note though, the php file that is provided in the zip file isn't complete

you need to add:

$sw = $_GET['sw'];
$sh = $_GET['sh'];

near the start, or the function just makes the image 0px x 0px, which isn't very helpful

either way though, i prefer my revised version of that particular code:

<?
resizeimg&#40;&#34;gradient.jpg&#34;, $_GET&#91;&#39;sw&#39;&#93;, $_GET&#91;&#39;sh&#39;&#93;&#41;;

function resizeimg&#40;$originalImage,$new_width, $new_height&#41;{

list&#40;$width, $height&#41; = getimagesize&#40;$originalImage&#41;;

$imageResized = imagecreatetruecolor&#40;$new_width, $new_height&#41;;
$imageTmp	 = imagecreatefromjpeg &#40;$originalImage&#41;;

imagecopyresampled&#40;$imageResized, $imageTmp, 0, 0, 0, 0, $new_width, $new_height, $width, $height&#41;;

header&#40;&#34;Content-Type&#58; image/jpeg&#34;&#41;; 
imagejpeg&#40;$imageResized,&#34;&#34;,100&#41;;
}
?>

I'm gonna try and implement that into my site now

EDIT: well I implemented it, but for some reason a green bar (different green) appears at the bottom... although that appears to be a problem on my end.

The second thing that the code does do is react to resizing a window (i.e. you would have to refresh the page if you wanted a correct background) a minor thing, but doesn't look too good if this happens. Now i have extremely limited knowledge of javascript (I can understand code, but that's pretty much as far as it goes atm) but is there a way to run the script again if the browser size updates?

EDIT2: just realised, the "green bar" is just the top of the gradient repeating, so the correct size isn't being selected... it must be something to do with the javascript function (and the conditions its being used in)

Also, its not because im using a table either, because i just tried wrapping the text in a div, and the same problem happens

Edited by Bob, 03 November 2007 - 19:44.

[Slightly Wonky Robob]

On reflection, this method seems to cause more problems than it solves, so i think i'll go back to a fixed size for the moment.

Appreciate the help though

[Felix Lockhart]

Thanks for the feedback! I made the changes to the javascript that are necessary to re-apply the backgrounds when the window is resized. I've always been annoyed at pages that reload when resized, so I implemented a better method. Instead of reloading the whole page, it only re-loads the function calls that generate the backgrounds.

As for the $_GET thing, that represents a larger issue I need to deal with. I was unaware that passing raw URL variables was a function of register_globals, nor was I aware that it was turned off by default in PHP installations. You obviously know what you're doing on that end, but I'll make the change in the downloadable file when I have the chance. For now, the main changes to the javascript are noted in the article, and the downloadable files (except the test page) are unchanged. Hope this helps!

http://www.lupinia.n...s/bg_resize.php