Creating a website banner (for all resolutions)

DJMK4 · 9 May 2007 at 15:48

Ok i made a banner before, which positioned differently in different screen resolutions, so i made an extra long banner in photoshop and used it as a background image in the banner div. problem is it it looks fine in a res such as 1280x1024 but in widescreen resolution its off centre.

is there a way i can create a banner that will auto-resize in any screen resolution?

What pixel size do i create the image in photoshop if i have a banner div of:

900px by 90px

?

Jaffa_Cake · 9 May 2007 at 16:25

What I tend to do in these situations is half a patern at one end which can be repeated. So the banner is displayed then a pattern is repeated in the rest of the space which hasn't been filled.

As an example:

The left part is an image, the right part is a repeated pattern, being copied along the X axis using CSS.

Not sure if this is what you are after, I don't fully understand the question :cool:

DJMK4 · 9 May 2007 at 17:19

Isnt there a way to do it by using the whole div instead of half a div image and half by bg color?

www.dmoranda.co.uk

what i mean is using the 1280x1024 res, the banner text (dmoranda.co.uk) is central, but on widescreen it doesnt adjust it for the res, so the dmoranda.co.uk text is aligned to the left slightly and is off centre.

FrostedNipple · 9 May 2007 at 17:30

[Sniper][Wolf] said:
Isnt there a way to do it by using the whole div instead of half a div image and half by bg color?

www.dmoranda.co.uk

what i mean is using the 1280x1024 res, the banner text (dmoranda.co.uk) is central, but on widescreen it doesnt adjust it for the res, so the dmoranda.co.uk text is aligned to the left slightly and is off centre.

i also see a white area on my screen 1600x1200, im not widescreen

DJMK4 · 9 May 2007 at 17:34

FrostedNipple said:
i also see a white area on my screen 1600x1200, im not widescreen

exactly, so how do i get the banner to automatically adjust the dimension of the image dependant on the screen resolution?

FrostedNipple · 9 May 2007 at 17:35

[Sniper][Wolf] said:
exactly, so how do i get the banner to automatically adjust the dimension of the image dependant on the screen resolution?

perhaps go for a set res of 1000

nomore · 9 May 2007 at 17:41

Jaffa_Cake said the correct method to do it.

You can't just go stretching an image (well, you could with javascript using the non-standard innerhtml to set the image size)...

You can put a repeating image either side of the main banner graphic.

Best way is to get the left 1 pixel column of the image as a new graphic, but make it 10 pixels wide so the browser has an easier time rendering it. Set it to repeat-x as the div's background-image. Then use an <img> tag to hold the main banner graphic, and keep it centered in the div. This should make a seemless, resolution independent banner.

DJMK4 · 9 May 2007 at 17:50

Thanks, ill have ago at that later