PDA

View Full Version : Howto create a Background that scales?


Linuxhippy
03-22-2005, 03:32 PM
Hi there!

I have a div-element and I would like to assign a background to it that scales, instead of the repeating algorythms supported by CSS.

It would be great if you could help my in the following points:

a.) Is this possible via a "standard" CSS definition?

b.) If not, I have had the following idea:
Create a JavaScript which asks the div-element for its size/width and assignes a scaled background-image to it.

I tried this with the following code:

Zweitbild =new Image();
weitbild.src="images/img_base.png";
Zweitbild.height = 10;
Zweitbild.width = 10;
getElementById("div1").style.backgroundImage = Zweitbild;


I tried quite a couple of different browsers, but it did not work at all - but also no browser told me whats wrong.
Could you tell me howto assign a javascript-image as background?

Another thing I would need to know is howto query the div-dimensions at "runtime". I do not mean the CSS-dimension properties since they only reflect the CSS set by the programmer not the rendered width/height (if not fix width/height is set).

I am quite new to CSS so please do not be angry about my childish questions...

Thank you in advance, lg Clemens

RysChwith
03-23-2005, 08:17 AM
There's no way in CSS to make a background image scale. It's either full size, or nothing at all. The only way I can think of to accomplish what you're after would be to put it in an <img> tag, then use z-indexing (http://www.w3schools.com/css/pr_pos_z-index.asp) to put everything above it, so that it serves as a background. Be forewarned that images tend to get kind of crunchy when they scale.

Rys