I have a layout with banner at 1024*800 which looks good but when i view my layout at 800*600 obviously there is a horizontal scroll bar to accomodate the rest of the image. How could you resize this image to fit 100% at 800*600 without loss of quality. The image is a jpg and was made in Adobe Photoshop. Ive tried adding width:100%; which works but loss of quality.
Any help is appreciated.Have you tried making it the background of a div so it's truncated when the div's smaller? If there's important content on both ends then consider making one end a background and the other an img.Yeah thanks for the reply i could do that but as you said that would take part of the image off. Is there anyway to do it without loss of image and no loss of quality.I think you're going to have trouble doing what you want. The usual advice is to design with the lower resolution in mind. When the higher res is used, the site should still look good.Yeah i thought this was going to be a problem. See for example you see all of these nice graphical sites where people have created kool graphics to hold there navigation areas and content etc but the problem is they dont care about resizing they just use photoshop to slice it up and most of them create at the res of 1024*786 but when viewing at 800*600 there is a huge horizontal scrollbar which is ugly and i bet no one here likes to scroll miles to get to the content.
I hope people understand what i mean im in the process of trying to find a site that does this. I would like images to resize to the certain res. Its ok when creating layouts with css which arent hughly graphic dependant but sites look nice with a certain amount of graphics used in the right places.I think I know what you mean about sites that have image headers that stretch to fit the browser. I think most of them use an image for one part, then repeat an image (an image that ties in with the image on the left) along the x-axis to fit the browser. Or they just use solid colors that blend in with the image on the left. If you're just going to use an image that is 1024 wide, you'll have problems, and it won't look good at lower resolutions.Originally posted by sharkey
Yeah thanks for the reply i could do that but as you said that would take part of the image off. Is there anyway to do it without loss of image and no loss of quality. Without an idea of what the header looks like it's impossible to get specific but many header images can be built using a multi-image "telescoping" layout that resizes to any reasonable page width.Ok i found a site mates the site is not good in the state of web standards etc. The header at the top stays 100% screen width at both resolutions without decrease of quality how is this done i know the headers are in tables but i would like to do it with divs.
Hope this helps guys thanks again.Ahh... Gotta link?Ahh forgot the link again mate sorry TheBanner Site (<!-- m --><a class="postlink" href="http://www.dundeefc.co.uk">http://www.dundeefc.co.uk</a><!-- m -->) This forgetting to upload files and add links is becoming to be a habit for me
That site is using a 3-column layout for the banner. It is actually one image on each side, and a third (see attachment) tiled across the center <div>. BUT! They designed it for 800x600, so it still looks good at higher resolutions.Ahem... See attachment.
Any help is appreciated.Have you tried making it the background of a div so it's truncated when the div's smaller? If there's important content on both ends then consider making one end a background and the other an img.Yeah thanks for the reply i could do that but as you said that would take part of the image off. Is there anyway to do it without loss of image and no loss of quality.I think you're going to have trouble doing what you want. The usual advice is to design with the lower resolution in mind. When the higher res is used, the site should still look good.Yeah i thought this was going to be a problem. See for example you see all of these nice graphical sites where people have created kool graphics to hold there navigation areas and content etc but the problem is they dont care about resizing they just use photoshop to slice it up and most of them create at the res of 1024*786 but when viewing at 800*600 there is a huge horizontal scrollbar which is ugly and i bet no one here likes to scroll miles to get to the content.
I hope people understand what i mean im in the process of trying to find a site that does this. I would like images to resize to the certain res. Its ok when creating layouts with css which arent hughly graphic dependant but sites look nice with a certain amount of graphics used in the right places.I think I know what you mean about sites that have image headers that stretch to fit the browser. I think most of them use an image for one part, then repeat an image (an image that ties in with the image on the left) along the x-axis to fit the browser. Or they just use solid colors that blend in with the image on the left. If you're just going to use an image that is 1024 wide, you'll have problems, and it won't look good at lower resolutions.Originally posted by sharkey
Yeah thanks for the reply i could do that but as you said that would take part of the image off. Is there anyway to do it without loss of image and no loss of quality. Without an idea of what the header looks like it's impossible to get specific but many header images can be built using a multi-image "telescoping" layout that resizes to any reasonable page width.Ok i found a site mates the site is not good in the state of web standards etc. The header at the top stays 100% screen width at both resolutions without decrease of quality how is this done i know the headers are in tables but i would like to do it with divs.
Hope this helps guys thanks again.Ahh... Gotta link?Ahh forgot the link again mate sorry TheBanner Site (<!-- m --><a class="postlink" href="http://www.dundeefc.co.uk">http://www.dundeefc.co.uk</a><!-- m -->) This forgetting to upload files and add links is becoming to be a habit for me
That site is using a 3-column layout for the banner. It is actually one image on each side, and a third (see attachment) tiled across the center <div>. BUT! They designed it for 800x600, so it still looks good at higher resolutions.Ahem... See attachment.