rejetto forum

Software => HTML & templates => HFS ~ HTTP File Server => RAWR-Designs => Topic started by: Kremlin on April 03, 2009, 02:43:43 PM

Title: Banner
Post by: Kremlin on April 03, 2009, 02:43:43 PM: 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. :-\
Title: Re: Banner
Post by: rejetto on April 03, 2009, 03:19:34 PM: try adding width='100%'
Title: Re: Banner
Post by: Kremlin on April 03, 2009, 04:43:12 PM: Well that's the usual way to do it, but in this case i can't get it to work with that approach.
Title: Re: Banner
Post by: TSG on April 04, 2009, 08:13:39 AM: 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.
Title: Re: Banner
Post by: Kremlin on April 04, 2009, 03:56:33 PM: 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.

(http://www.freeimagehosting.net/uploads/th.2bc0c21c1b.jpg) (http://www.freeimagehosting.net/image.php?2bc0c21c1b.jpg)

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' :P
Title: Re: Banner
Post by: Kremlin on April 05, 2009, 12:18:01 AM: 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 :P
Title: Re: Banner
Post by: rejetto on April 05, 2009, 08:26:08 PM: that is the way, but it doesn't apply so easily to every situation.
Title: Re: Banner
Post by: Kremlin on April 06, 2009, 01:34:05 AM: 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.
Title: Re: Banner
Post by: TSG on April 06, 2009, 06:57:43 AM: 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:

However I wouldn't bother, doesn't make a difference.
Title: Re: Banner
Post by: TSG on June 17, 2009, 11:46:10 AM: 1024x768 is the new minimum standard screen resolution, it used to be 800x600 :o. 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.