Background Image Problem

[Designer_101]

Hey
I've come across a bit of a problem. I'v decided to use photoshop to create a website for a friend (design the layout, then cut and place as backgrounds in 'div' tags). I understand this isnt the best way to go around it and have never tried it before, but would like to give it a shot.

Anyway, the problem is that i have a background image but in photoshop i dont know how big it should be, the aspect ratio ect..

Different people have different screen sizes, if i made the background for my screen, it wouldnt fit others?

Any ideas?

[ccube921]

Observe the daniweb design, a rectangle with rounded corners. Most people have a 1024x768 resolution, so design a big rounded rectangle for that resolution, then if someone has a bigger resolution they will have the same rectangle, just not full page. There are just about 10% of screens that are less than the 1024x768 and those are mostly mobile.

[Designer_101]

ok, but what if they have smaller
does a browser change the aspect ratio of the width or height differs?
does it enlarge it or make it smaller ect..

Its been bugging me lol

Anothing thing, if my page is bigger in width than the screen of the user
will it add a scroll bar, because they are so tatty lol

Thankyou for replying

[MidiMagic]

You need to design for all resolutions, instead of assuming a specific screen size. Many senior citizens have lower resolutions (e.g. 800 X 600) so they can see the text easier.

I have several tips on making a compatible screen:

1. Don't cram too much on the page.

2. Never use absolute positioning or size.

3. No images larger than 600 X 450 pixels (unless you want people to scroll).

4. Don't piece images together from smaller parts (this falls apart with low resolutions).

5. Use alignments to provide a pleasing display (I tend to place text on the left, images on the right, so the text left-justifies).

6. Design the layout so it can expand and contract.

7. Never place text on top of an image. Many people can't read text with a pattern under it.

8. Use real links, not dropdown menus or clickable parts of images.

9. No moving content, unless you are using motion to teach something. It is VERY annoying to everyone except the page designer (the ad to the right of the page as I am composing is distracting me to the point that it is taking longer to compose this).

10. Test your low-resolution "look" by reducing the size of the browser window. Also check with multiple browsers.

[Designer_101]

thanks alot
that really does help

:)

[ccube921]

I was just wondering then, as opposed to dropdown menus, how else should I have full navigation from the main page without a million clunky links