[CSS]background image wont resize according to screensize

[Binji]

Im trying to create a page with a background image about 30px wide and 1200px high (its a linear gradient image) which im tiling on x axis. The problem is that the image wont scale..it always remains the same size no matter how big the browser window is. I tried with this CSS code:


body{
background-image:url(ozadje.png);
background-attachment: fixed;
background-repeat: repeat-x;
height: auto !important;
height:100%;
position: fixed;
}


Thanks very much!

[Surrogate]

Im trying to create a page with a background image about 30px wide and 1200px high (its a linear gradient image) which im tiling on x axis. The problem is that the image wont scale..it always remains the same size no matter how big the browser window is. I tried with this CSS code:


body{
background-image:url(ozadje.png);
background-attachment: fixed;
background-repeat: repeat-x;
height: auto !important;
height:100%;
position: fixed;
}
Thanks very much!

I do not think it's possible. I've googled for a solution and found none.

[Surrogate]

I do not think it's possible. I've googled for a solution and found none.

I beg to differ! (Looks angry at himself)

There is indeed a way to make a scaling gradient!... The latest article on A List Apart shows just how to do that - so what are you waiting for? Read the article:

http://www.alistapart.com/articles/supereasyblendys

Found it by chance, when i wanted to read some articles while eating my breakfeast ;)

[Surrogate]

Looking at it, it seems that the article doesn't concern itself with IE's inability to show .PNG images :( None of the examples work in IE6 :\

That is a very common problem though, so just go here, and work this neat IE hack into the above gradient hack :P
http://homepage.ntlworld.com/bobosola/

[Binji]

wow..nice!! Thank you very much!(-:

[Binji]

I used the method of scaling on the link above and i have a problem...Im using a dropdown menu in a div above the div which has scaled bg image. In FF the menu displays fine but i cant see the text and in IE the menu hides behind the scaled BG image and the text is placed below the image. Any ideas? I looked at how he has handled these issues but it doesnt seem to work with me
(relevant)code:
HTML


<div id="telo">
<img style="z-index:0" id="ozadje" src="ozadje2.png" />

rgafrga

</div><!-- telo div -->

CSS


(UPPER DIV CONTAINING THE MENU)

#menuh-container
{

display:block;
position: relative;
float:left;
height:auto;
background-color:#c8c8c8;
width:100%;
margin:0;
padding-bottom:1em;
z-index:1;
}


(CSS FOR THE BACKGROUND IMAGE)
#ozadje{
position:absolute;
right:0;
left:0;
height:100%;
width:100%;
z-index:0;
}

(CSS FOR DIV CONTAINING THE BG IMAGE)
#telo{
width:auto !important;
width:100%;
height:auto !important;
height:100%;
float:left;
margin:0;
/*z-index:0;*/
}
#telo *{
position:relative;
z-index:1;
}


Thanks for your ideas:)