What dimensions should my background image be for a web page?

woj101 · 30 October 2008 at 1:56PM

I'm trying to design a background image for a website, using Photoshop to design the image and then Dreamweaver CS3 to design the web page that has that background.

Despite trying to match up the image dimensions in Photoshop with the page dimensions in Dreamweaver, whenever I upload the page to Dreamweaver (and subsequently the html file) the image does not fit the page as I would like i.e. it doesn't 'stretch' the image to fit - instead it is either too big or tiled.

Can anyone help me with this - is there a standard dimension I should be using?

I'm using Win XP with a 1280 x 1024 screen resolution for what it's worth.

Thanks very much.

[Deleted User] · 30 October 2008 at 2:25PM

Do you want one image to cover the entire page, without tiling?

Good luck with that one

In the past, i've used images that tile or are in a fixed position - you just can't reliably cover a page with a background.

So, no standard dimension.. you need to think of a web site a fluid design - not a static image

isofa · 30 October 2008 at 4:35PM

If you do want just a single background image, not tiled, and want it at least visible in 1280 x 1024, then you need to make it larger than that by a margin, so if a browser window is stretched it will still not "end". However unless it's a very simple image and compresses well with JPG, GIF or PNG, it's likely to be quite large.

(Also set 0 borders all around the image!)

phill79 · 30 October 2008 at 7:33PM

woj101 wrote: »

I'm using Win XP with a 1280 x 1024 screen resolution for what it's worth.

Something to think about:
Just because you are using that size, doesn't mean the people who will be looking at your page will be. Think about how your page will look on 800x600 etc.

woj101 · 31 October 2008 at 9:20PM

In light of the above and other things I've read, and my lack of experience in producing web pages (outside of MS Word) I've ditched the background picture idea. Keep things simple, that's the name of the game. So what I've opted to do is make a all-encompassing div tag that is 800 pixels wide and centred in the screen so that no matter what resolution the screen is (within normal parameters anyway) the content will always appear in the middle.

Working your way through Dreamweaver for the first time can be slow going.

Thanks all

sweven · 31 October 2008 at 11:49PM

You're probably right not to do it, but if you wanted to try the best way to do it might be like this.

Feather the edges of the image down to the same colour all round and then use the following CSS.

body {background: url(myimage.jpg) #fffffff top center repeat-y;}

(This assumes you've feathered the image to white - #ffffff)

That way the image blends in to the background color so it will look reasonable with any screen resolution.

What dimensions should my background image be for a web page?

Comments

Categories

Get our FREE Weekly email full of deals & guides - and it’s spam-free