Banner

[Kremlin]

Does anyone know how to stretch a banner image so it will always show the whole image no matter what the users resolution is? Searched a bit and didn't find anything conclusive. 

[rejetto]

try adding width='100%'

[Kremlin]

Well that's the usual way to do it, but in this case i can't get it to work with that approach.

[TSG]

You want to stretch an image... but at 1920x1200 it would be so blurred and stretched lol. I would redesign the image so you can have a repeat background on say a div and the actual banner centered or something.

[Kremlin]

So in order for you to understand the situation better i'll post an image of the server page in two resolutions, keep in mind that the width:100% would not solve this problem, at least from what i've tryed.



As for TSG's solution well the banner image doesn't quite allow to use such option since is spreads across from one edge to the other 'Mr Joker' to 'CUPXII Server' 

[Kremlin]

What i've decided to do is reduce the overall template resolution down from 1090px max to a lower 900px or so, and adjust the banner to that resolution. In the end bigger resolutions (user wise) will see the template page smaller in width but the banner will now show medium resolutions (1024+) in it's full.

PS. Why 1090px and not 1024px TSG? Always found that odd 

[rejetto]

that is the way, but it doesn't apply so easily to every situation.

[Kremlin]

It works well in RAWR templates if anyone's trying on it (took me 5~ mins to change the buttons and MainInner resolution to the correct one.

[TSG]

I think ToG CSS was programmed for a mildly stretchy design in supported browsers 980px in IE. This should fix it. I dunno where you got 1090 from but 980px was chosen to leave room for the padding, and the scrollbar on a 1024 browser.

#mainInner  {
   margin:auto;
   /*
   min-width:230px;
   max-width:1111px;
   */
   width:980px;
   background:#FFF;
   border:1px solid #004480;
}

With this fix you can remove:
<!--[if lte IE 6]><style type="text/css">#mainInner{width:980px}</style><![endif]-->
However I wouldn't bother, doesn't make a difference.

[TSG]

1024x768 is the new minimum standard screen resolution, it used to be 800x600 . 980px or somewhere within those bounds allows the website to not go over the width of the browser on those screens (with vertical scroll bar). I use the CSS3 component max and min-width to create a mildly stretchy design to help with larger resolutions, however some browsers do not support the feature. I personally do not like designs that fill the browser, and letting the user shrink the website can make it hard to use, so a minimum width is required.