Your browser isn't supported
It looks like you're using an old web browser. To get the most out of the site and to ensure guides display correctly, we suggest upgrading your browser now. Download the latest:

Welcome to the MSE Forums

We're home to a fantastic community of MoneySavers but anyone can post. Please exercise caution & report spam, illegal, offensive or libellous posts/messages: click "report" or email forumteam@. Skimlinks & other affiliated links are turned on

Search
  • FIRST POST
    woj101
    What dimensions should my background image be for a web page?
    • #1
    • 30th Oct 08, 12:56 PM
    What dimensions should my background image be for a web page? 30th Oct 08 at 12:56 PM
    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.
    I am a cider drinker - like my father before me.
Page 1
    • ringo_24601
    • By ringo_24601 30th Oct 08, 1:25 PM
    • 15,341 Posts
    • 23,811 Thanks
    ringo_24601
    • #2
    • 30th Oct 08, 1:25 PM
    • #2
    • 30th Oct 08, 1:25 PM
    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
    • By isofa 30th Oct 08, 3:35 PM
    • 5,959 Posts
    • 3,001 Thanks
    isofa
    • #3
    • 30th Oct 08, 3:35 PM
    • #3
    • 30th Oct 08, 3:35 PM
    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
    • By phill79 30th Oct 08, 6:33 PM
    • 483 Posts
    • 251 Thanks
    phill79
    • #4
    • 30th Oct 08, 6:33 PM
    • #4
    • 30th Oct 08, 6:33 PM
    I'm using Win XP with a 1280 x 1024 screen resolution for what it's worth.
    Originally posted by woj101
    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
    • #5
    • 31st Oct 08, 8:20 PM
    • #5
    • 31st Oct 08, 8:20 PM
    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
    I am a cider drinker - like my father before me.
  • sweven
    • #6
    • 31st Oct 08, 10:49 PM
    • #6
    • 31st Oct 08, 10:49 PM
    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.
Welcome to our new Forum!

Our aim's to save you money quickly and easily. We hope you like it!

Forum Team Contact us

Live Stats

2,835Posts Today

6,990Users online

Martin's Twitter