rejetto forum

Banner

Kremlin · 10 · 3790

0 Members and 1 Guest are viewing this topic.

Offline Kremlin

  • Tireless poster
  • ****
    • Posts: 137
    • View Profile
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.  :-\


Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13438
    • View Profile

Offline Kremlin

  • Tireless poster
  • ****
    • Posts: 137
    • View Profile
Well that's the usual way to do it, but in this case i can't get it to work with that approach.


Offline TSG

  • Moderator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
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.


Offline Kremlin

  • Tireless poster
  • ****
    • Posts: 137
    • View Profile
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'  :P


Offline Kremlin

  • Tireless poster
  • ****
    • Posts: 137
    • View Profile
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


Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13438
    • View Profile
that is the way, but it doesn't apply so easily to every situation.


Offline Kremlin

  • Tireless poster
  • ****
    • Posts: 137
    • View Profile
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.


Offline TSG

  • Moderator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
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.


Offline TSG

  • Moderator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
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.
« Last Edit: June 17, 2009, 11:50:10 AM by TSG »