Main site > MoneySavingExpert.com Forums > Household & Travel > Techie Stuff > What dimensions should my background image be for... (Page 1)

IMPORTANT! This is MoneySavingExpert's open forum - anyone can post

Please exercise caution & report any spam, illegal, offensive, racist, libellous post to forumteam@moneysavingexpert.com

  • Be nice to all MoneySavers
  • All the best tips go in the MoneySavingExpert weekly email

    Plus all the new guides, deals & loopholes

  • No spam/referral links
or Login with Facebook
What dimensions should my background image be for a web page?
Closed Thread
Views: 10,586
Thread Tools Search this Thread Display Modes
# 1
woj101
Old 30-10-2008, 12:56 PM
MoneySaving Stalwart
 
Join Date: Aug 2004
Posts: 202
Default What dimensions should my background image be for a web page?

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.
woj101 is offline
Report Post
# 2
ringo_24601
Old 30-10-2008, 1:25 PM
Deliciously Dedicated Diehard MoneySaving Devotee
 
Join Date: Feb 2006
Posts: 13,358
Default

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
ringo_24601 is offline
Report Post
The Following User Says Thank You to ringo_24601 For This Useful Post: Show me >>
# 3
isofa
Old 30-10-2008, 3:35 PM
Fantastically Fervent MoneySaving Super Fan
 
Join Date: Apr 2007
Posts: 5,953
Default

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!)
isofa is offline
Report Post
The Following User Says Thank You to isofa For This Useful Post: Show me >>
# 4
phill79
Old 30-10-2008, 6:33 PM
MoneySaving Stalwart
 
Join Date: Jan 2004
Posts: 475
Default

Quote:
Originally Posted by woj101 View Post
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.
phill79 is offline
Report Post
The Following User Says Thank You to phill79 For This Useful Post: Show me >>
# 5
woj101
Old 31-10-2008, 8:20 PM
MoneySaving Stalwart
 
Join Date: Aug 2004
Posts: 202
Default

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.
woj101 is offline
Report Post
# 6
sweven
Old 31-10-2008, 10:49 PM
MoneySaving Convert
 
Join Date: Oct 2003
Location: Cromarty, Highlands
Posts: 105
Default

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.
sweven is offline
Report Post
Closed Thread

Bookmarks
 
 




Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

 Forum Jump  

Contact Us - MoneySavingExpert.com - Archive - Privacy Statement - Top

Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

All times are GMT +1. The time now is 6:35 PM.

 Forum Jump  

Free MoneySaving Email

Top deals: Week of 22 October 2014

Get all this & more in MoneySavingExpert's weekly email full of guides, vouchers and Deals

GET THIS FREE WEEKLY EMAIL Full of deals, guides & it's spam free

Latest News & Blogs

Martin's Twitter Feed

profile

Cheap Travel Money

Find the best online rate for holiday cash with MSE's TravelMoneyMax.

Find the best online rate for your holiday cash with MoneySavingExpert's TravelMoneyMax.

TuneChecker Top Albums

  • ED SHEERANX (DELUXE EDITION)
  • SAM SMITHIN THE LONELY HOUR (DELUXE EDITION)
  • VARIOUS ARTISTSKEEP CALM & CHILLOUT

MSE's Twitter Feed

profile
Always remember anyone can post on the MSE forums, so it can be very different from our opinion.
We use Skimlinks and other affiliated links in some of our boards, for some of our users.