We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now


displaying banner in different browsers

romram asked
Medium Priority
Last Modified: 2010-08-05
I had made in photoshop 6 a banner that I want it to be displayed in the full width of the browser, the banner size is 500x60 and its resolution is 72 pix/inch and it is in jpg format>
I tried to set the width and hight property in the html file, but the image was destroyed, also I tried to change the image size in photoshop but also the image was destroyed...
can somebody tell the solution and tell me also how to make the image fet all browsers????
Watch Question

Any time you resize an image with HTML itll look UGLY. No real way around that one.
As for resizing in photoshop, NEVER resize up. If youre going to resize, resize down.
There's really no way to take a raster image, and have it resize nicely so that it fits ALL browsers. If you want something that resizes nicely, youll have to do it as a vector, flash, or SVG.
Resize each layer in PS individually in order to maintain as much resolution as is possible.  You can make one size that is pretty close to "fits all browsers" however with so many variables like screen size/resolution etc it wont be 100%.  

resizing each layer individually makes NO difference in the resulting quality. Nor is it going to have anything to do with the resulting rez.
Well its better then resizing the picture with HTML.

Not really. The problem is that the image doesnt "grow" to fit larger browsers. Resizing it in Photoshop (all the layers at once, not one at a time which achieves nothing different than doing them all at once) will give you a slightly better image, but you've still hosed your quality. If you resize down in photoshop your image will look better than a resize up, but you've just gotten farther away from having it fit all browsers.
Oh I see now.  I misunderstood the question.  Well I dont see why you couldnt find a JavaScript code that would resize the image accorgind to browser, screen resolution etc.  Try www.javascriptsource.com.  If your a more advanced web designer, try setting up several IF statements

If you are just wanting it to not look odd, you could make it expand and collapse with the browser. you would just make a table and insert a small slice of the end of your immage (lke 10 px) as the background img for the table. Next nest another table inside the first one with your img in it. The code would look somthing like this...

<table background="images/exp2.gif" width="100%" height="60" border="0" cellpadding="0" cellspacing="0">
<table id="Table_01" width="735" height="173" border="0" cellpadding="0" cellspacing="0">
      <tr><td><img src="images/YOUR.jpg" width="500" height="60" alt=""></td></tr>

the end result would be that no matter ther screen resalution or browser size, your banner will streach all the way accross the screen.
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
The majority of browers on the Web are still using 800 x 600 resolution.  I like to design headers that are 760 pixels wide, then fill in out to 1024 pixels wide with prettiness that is not important information.  That way, people with 800 x 600 resolution are missing nothing, and people with 1024 x 768 resolution see something all the way across.  People with smaller resolution than 800 see most websites cut off horizontally anyway because their monitor is just too small for modern times.  And people with larger resolution than 1024 x 768 are used to websites not filling their screens.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.