image auto resize to fit screen width

[mesaboogie]

I am using the CSS Fluid1 template ... I would like to put a background image in the "logoFrame" of this template and I need it to auto resize ... so that it is the same size as the nav bar under it ... I have been staring at codes and trying different things for countless hours and I am lost ... can someone please help me and let me know if this is even possible .. THANK YOU SO VERY MUCH

[ridexbuilder]

[Wonders how you're going to cope with the distortion created by non-proportional stretching of the image.]

[mesaboogie]

I took the background of the logo and put that in as a background piece, and then the actual logo part, I put in separately ... so the actual logo won't need to stretch, just the background will ....
if someone could tell the code the so that the background will repeat if necessary, it would be very much appreciated ....

[ridexbuilder]

try..

img#logo {
position: absolute;
left: 20px;
bottom: 10px;
background-image : url(../../images/logo-background.gif) repeat-x;
}

You may need to create a entirely separate entry for the background image though - in mainpage.tpl & stylesheet.

[mesaboogie]

thankyou ... I've already got the background piece in, I just needed the code for the repeat ... the image itself right now is 2000 pixels wide and its working fine ... I think I may need to cut it into a smaller piece and have it repeat ... I have a 22' wide screen monitor with a screen resolution of 1680 wide ... I would like to have it so that if someone has for instance say a 24" or wider monitor that the background piece will fit accordingly ... so, I think possibly trying to cut it into pieces might be an idea to try ...

[ridexbuilder]

[Physical screen size is irrelevant, it's the resolution that dictates visual width]
A URL would help but as I use 1280 on a laptop, then POC is the only option.

[mesaboogie]

thanks again ... here is the url

Atlantic Skies Birdie Supplies :

I have left the piece in as 2000 pixels wide ...
can you please tell me what the difference is between

ABSOLUTE and RELATIVE

I am still in the process of finishing up the site ... I am also redoing all the little gifs that come with OSCMAX ... I plan on replacing all of them and what I don't replace I want to clean up the edges on them ....

thanks for all your help

[ridexbuilder]

headerbackground.jpg only needs to be 1px wide

main_layout.css

div#logoFrame {
background-image:url(images/headerbackground.jpg) repeat-x;
border:1px solid black;
height:200px;
margin-left:15px;
margin-right:15px;
position:relative;


}

ABSOLUTE and RELATIVE

As in other walks of life. Absolute position => fixed; Relative => relative position compared to previous item.

[mesaboogie]

thankyou so much for all your help .. this is the first oscmax catalog I have ever done ... and its been one hell of a learning experience ... I have taken the template and changed it and now I'm editing all the graphics ...

it would be a great idea if all the little icons for the oscmax templates could be .png files on transparent backgrounds ... it would avoid them looking fuzzy around the edges when they are placed on other colours ....

again, thankyou !