 |  |  |  |  |  |  |  |
Background for different sized screens ?
Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
•
•
Join Date: Jul 2007
Posts: 258
Reputation: 
Solved Threads: 12
Posting Whiz in Training
Hi
What size should i make a background for my website if it needs to be displayed on different screen sizes?
Im making the webpage in photoshop therefore i need to decide how big my canvas is. If i made the screen 1280x800 it would fit mine perfectly however not other peoples
any ideas?
Thanks
What size should i make a background for my website if it needs to be displayed on different screen sizes?
Im making the webpage in photoshop therefore i need to decide how big my canvas is. If i made the screen 1280x800 it would fit mine perfectly however not other peoples
any ideas?
Thanks
•
•
Join Date: Mar 2007
Posts: 686
Reputation:
Solved Threads: 61
Practically a Master Poster
If you want to make it more flexible, you should probably not have a single canvas as a background. But if you are going to make a canvas, it would probably make sense choosing a standard width screen, e.g. 640x480, 800x600 ...
•
•
Join Date: Jan 2007
Posts: 276
Reputation:
Solved Threads: 15
Posting Whiz in Training
I'd say it's safe to start now with something around 700-800. Or what you can make a base of 800px but place the important elements at the center... then have the edges be 'open' to tiling so screens wider than 800px won't get a blank boring canvas.
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation:
Solved Threads: 164
Don't design for a size. Design to percentages. No overall background image (hard to see text on top of it anyway). Never use pixel counts for sizes.
Daylight-saving time uses more gasoline
i agree with Midimagic.. the texts cannot be read if you use a graphic intensive background image... but if you really insist.. choose an image that when tiled it would still look alright. Make it simple and dont overpower your text...
•
•
Join Date: Jan 2007
Posts: 276
Reputation:
Solved Threads: 15
Posting Whiz in Training
Actually... there is a trend to large background images now. Layouts like this are starting to become popular... You just have to make sure that your content won't lie directly on top of it (as in this example).
The advantage to this is you can have a compelling background AND if the screen width is small, there's no love lost if the whole background isn't displayed. If the screen is too wide, the 'tiling' background still blends in with the 'base background image'. As can be seen here. =)
So the trick is to make a 'concentrated' background around 700px and put it on top of a texture that you can cut and set as your real body-background.
The advantage to this is you can have a compelling background AND if the screen width is small, there's no love lost if the whole background isn't displayed. If the screen is too wide, the 'tiling' background still blends in with the 'base background image'. As can be seen here. =)
So the trick is to make a 'concentrated' background around 700px and put it on top of a texture that you can cut and set as your real body-background.
If you know ASP, you can save other daniweb members from idiots like me by helping out in this forum.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
•
•
Join Date: Oct 2005
Posts: 1,283
Reputation:
Solved Threads: 14
If you are using a background "photo" then put something on top of it so people can read the text clearly.
If you are using photoshop to design your website then start with a canvas of about 770px wide and it doesn't really matter for height but make sure you think about people will see as soon as they get your site on screen... so the first 500px or so.
However, it is better to have your widths displayed by percentage however if your site is quite graphic intensive it is extremely hard to do so. But some sites do it well: KevAdamson. If this is your first attempt at making a graphical website, then make it easier for yourself as so many do and stick with a fixed width. You can then have a large background image or if you care about your users bandwidth a small repeating one. I personally tend to use just some diagonal (1 pixel wide) lines that are repeated for the full width and height of the screen.
My website Photoshopthis(may seem like a shameless plug but I don't really do anything to the site anymore) does have a percentage width but it took me sooo long to figure it all out logically that I got bored and left some things unfinished. shame I know.
Hope some of that helps.
If you are using photoshop to design your website then start with a canvas of about 770px wide and it doesn't really matter for height but make sure you think about people will see as soon as they get your site on screen... so the first 500px or so.
However, it is better to have your widths displayed by percentage however if your site is quite graphic intensive it is extremely hard to do so. But some sites do it well: KevAdamson. If this is your first attempt at making a graphical website, then make it easier for yourself as so many do and stick with a fixed width. You can then have a large background image or if you care about your users bandwidth a small repeating one. I personally tend to use just some diagonal (1 pixel wide) lines that are repeated for the full width and height of the screen.
My website Photoshopthis(may seem like a shameless plug but I don't really do anything to the site anymore) does have a percentage width but it took me sooo long to figure it all out logically that I got bored and left some things unfinished. shame I know.
Hope some of that helps.
•
•
Join Date: May 2006
Posts: 55
Reputation:
Solved Threads: 0
Junior Poster in Training
Hello Designer_101,
That is one of the questions that I had to deal wend I started to build templates. Probably one of the best solutions is to use a repeating background image like a texture.. pattern … or gradient. And it will fill out the entire background without giving you a headache about the background size.
This are the my visitor’s screen resolutions (this are the results of one of my sites):
1. 1024x768 - 29.91%
2. 1280x800 - 18.32%
3. 1280x1024 - 14.95%
4. 1440x900 - 8.50%
5. 1680x1050 - 8.22%
6. 800x600 - 6.96%
7. 1152x864 - 5.14%
8. 1280x960 - 2.00%
9. 1280x768 - 1.37%
10.1920x1080 - 0.97%
11.1400x1050 - 0.86%
12. 1360x768 - 0.80%
13. 1364x768 - 0.29%
14. 1126x845 - 0.23%
15. 1280x720 - 0.23%
16. 1920x1200 - 0.23%
17. 1045x836 - 0.17%
18. 1366x768 - 0.17%
19. 1600x1200 - 0.17%
20. 1152x720 - 0.11%
21. 1512x945 - 0.11%
22. 640x480 - 0.11%
23. 1152x648 - 0.06%
24. 800x480 - 0.06%
25. 992x588 - 0.06%
You can take your own conclusions.
Different types of users have different resolutions.
If you are targeting designers and other IT professionals you must use a big background because the screen resolutions will by very high.
But it all depends on what kind of site are you building (contents, web technologies you are using.. and so on)
Best regards
Miguel Costa
That is one of the questions that I had to deal wend I started to build templates. Probably one of the best solutions is to use a repeating background image like a texture.. pattern … or gradient. And it will fill out the entire background without giving you a headache about the background size.
This are the my visitor’s screen resolutions (this are the results of one of my sites):
1. 1024x768 - 29.91%
2. 1280x800 - 18.32%
3. 1280x1024 - 14.95%
4. 1440x900 - 8.50%
5. 1680x1050 - 8.22%
6. 800x600 - 6.96%
7. 1152x864 - 5.14%
8. 1280x960 - 2.00%
9. 1280x768 - 1.37%
10.1920x1080 - 0.97%
11.1400x1050 - 0.86%
12. 1360x768 - 0.80%
13. 1364x768 - 0.29%
14. 1126x845 - 0.23%
15. 1280x720 - 0.23%
16. 1920x1200 - 0.23%
17. 1045x836 - 0.17%
18. 1366x768 - 0.17%
19. 1600x1200 - 0.17%
20. 1152x720 - 0.11%
21. 1512x945 - 0.11%
22. 640x480 - 0.11%
23. 1152x648 - 0.06%
24. 800x480 - 0.06%
25. 992x588 - 0.06%
You can take your own conclusions.
Different types of users have different resolutions.
If you are targeting designers and other IT professionals you must use a big background because the screen resolutions will by very high.
But it all depends on what kind of site are you building (contents, web technologies you are using.. and so on)
Best regards
Miguel Costa
Last edited by migcosta; Dec 31st, 2008 at 2:00 pm.
•
•
Join Date: Oct 2008
Posts: 76
Reputation:
Solved Threads: 6
Junior Poster in Training
Like micgosta said it is best to use a repeat background/gradient (which can still be cool, check out http://bgpatterns.com/) Then wrap your main content in a div which shouldn't be very graphical so that the text is readable. Design your main content and site around an 800 x 600 platform and then you can use this javascript redirect to send lower resolution screens to a page just for them:
Be sure to substitute your names.
<script type="text/javascript">
if (screen.width<800)
{
window.location="Mobile page name"
}
else
{
window.location="Main page name"
}
</script> Last edited by ccube921; Dec 31st, 2008 at 4:27 pm.
If I have been helpful add to my reputation!
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation:
Solved Threads: 164
•
•
•
•
Originally Posted by kanaku 
Actually... there is a trend to large background images now. Layouts like this are starting to become popular... You just have to make sure that your content won't lie directly on top of it (as in this example).
Daylight-saving time uses more gasoline
|
Similar Threads
- Trying to use not tables, only CSS, but can I? (HTML and CSS)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: Frames, Frontpage and FireFox
- Next Thread: How do I center a design in Photoshop? Help
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest Site Layout and Usability Posts
- Today's Posts
- Unanswered Threads
blogging content customer design development dreamweaver duplicate email evaluation filesharing firefox flash gilbane google html itunes javascript kazaa layout music napster peertopeer photoshop remote remoteserver satellitenavigation satnav server site tables template tips tomtom url wave web website websitedesignreview web_development web_sites
