Background for different sized screens ?

[Designer_101]

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

[sillyboy]

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 ...

[kanaku]

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.

[MidiMagic]

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.

[Jen0608]

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...

[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).

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.

[roryt]

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.

[migcosta]

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

[ccube921]

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:

<script type="text/javascript">
if (screen.width<800)
{
window.location="Mobile page name"
}
else
{
window.location="Main page name"
}
</script>

Be sure to substitute your names.

[MidiMagic]

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).

Aaack! Sensory overload! Must hit back button, and then block site!

[kanaku]

Ack! It is Mr.19-things-plus-four! haha

Excuse: The audience is designers-wanting-to-be-wowed... right?

Be merciful. You should give it points because you can still use the back button. =p

*tries to delete quoted post but fails due to 30-minute rule*

update:
Midimagic, you ruined it for me... I can't love webdesigner wall like I did 80+ posts ago... give me back my naivete!

[Designer_101]

wow thats really helpful
thankyou

however my problem is that i understand people design websites in photoshop before taking it into html.
If thats true then surly there is a certain method.

And about the screen sizes, how would i use percentages there.
FOr margins ect ?

[sillyboy]

design / implementation are quite different. if you create a design, it is through 1 size, so it won't look different to different users, whereas with the implementation everybody has different browsers and resolutions. with the actual implementation, you need to try accomodate various requirements of your target audience. I won't say these values are dictacted by what you do in photoshop.

[Designer_101]

thakyou sillyboy

Thats really helped. I will do some research on using percentages ect and start making my code more efficient.
Again thankyou

[MidiMagic]

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).

There are a couple of computer dictionary terms for pages like that one:

- Angry fruit salad

- Angry fruit cocktail

[kanaku]

There are a couple of computer dictionary terms for pages like that one:
- Angry fruit salad
- Angry fruit cocktail

Heehee. Thanks for enlightening me (and gamely rubbing it in, you can keep my naivete). :p

Sorry for hijacking your thread Designer_101. To answer your design vs implementation problem, take a look at rev.iew.me. You can design the background using an 800px canvas in Photoshop, right? But the design 'expands' to fill the whole width of the screen due to a repeating background.

You can use % not only for the margins but for the content itself. When you're planning a design, you can use this technique: Start with a small canvas (700-800). Use a prominent banner for your centerpiece and have the background look 'interesting' (ie not bland) by tiling a small (1px?) strip.

If you design like this, you can now use percentages without fear of 'breaking' the layout you drafted in photoshop. For example, set 80% as the width for the content itself without the layout looking cut-off (recall the tiling 1-px background).

However, the problem with percentages is that it might stretch your content too wide (ie monitors with 2000px*80% = 1600px!) and people don't like reading long lines OR it might make your content too thin (say if the browser window is 200px, 80% = 160px. Yikes!) What you can do is add a max-width or min-width to your content div. BUT IE6 (and/or IE7) doesn't support this.

Let's just give up designing until all browsers become standards-compliant. :p

[Designer_101]

Let's just give up designing until all browsers become standards-compliant.

Haha, thankyou very much. Thats really clicked the lightbulb here.
I'l give percentages a go, i'm sure there very exiting :D

Thanks again

[roryt]

Let's just give up designing until all browsers become standards-compliant. :p

I can't wait for that day....

I may look very against percentages but, yeh they are great if you start off your design with them in mind. And you will get more headaches along the way unless you are absolutely thinking about every single letter you type.

It is strange how many problems IE (mainly) causes by just not being compliant with the simplist little things... like width!

Oh and to everyone who is having problems with web browser compliance then use firefox from now on and use the IE Tab. You'll never have to click that annoying E again.

[MidiMagic]

IE is the worst offender when it comes to standards compliance.

Percentages are hard, unless you realize that IE and FF make it seem harder than it really is.

The average desinger applies all of the styles to the same tag. Example:

He writes this style:

.divwid {width: 50%; margin: 10pt;}

Then he tries to place two div tags with text content side by side.

<div class="divwid">Put lots of text here.</div>
<div class="divwid">Put even more text here.</div>

IE places the divs side by side, because it places the margin inside the set width. but makes the divs look taller, because the text space is less than 50 percent wide.

FF makes the text space 50 percent wide, But the margin is OUTSIDE that 50 percent,. so both divs don't fit in a horizontal row. But each div is not as tall as it is in IE

But he CAN make both browsers behave the same way on this:
Example:

He writes these styles:

.divwid {width: 50%; margin: 0; border: none; padding: 0;}
.divnest {margin: 10pt;}

Then he places two sets of nested div tags with text content side by side.

<div class="divwid">
  <div class="divnest">Put lots of text here.</div>
</div>
<div class="divwid">
  <div class="divnest">Put lots of text here.</div>
</div>

This time, both browsers do the same thing. The outer divs are exactly 50 percent wide. The inner divs apply the margin, with the text inside the margin.

Done this way, percentages become easy.