different screen size problems

shammy2007 · #1 Feb 25th, 2008, 15:41

Hi.

I made a pretty simple site just using HTML.
I made a background image to use and also a few other little graphics.
When I check the site on a few screens its fine, but when i checked it on a few other screens,, the background image is repeating at the right hand conrner and also at the bottom, plus the other grapichs which are aligned to the center, suddenly appear close to the right hand corner and the buttons in the middle go to the left side.

Is this just a screen resolution problem?.
Im wondering how to fix this.

Im not sure which way to go to acctually fix it.

Jack Franklin · #2 Feb 25th, 2008, 16:08

It could be a browser specific problem. Could you post the site?

shammy2007 · #3 Feb 26th, 2008, 18:57

Got it fixed.
I tried it in several browers and it was fine on the normal resolution setting.,
The other screen was set to highest resolution. But i made the background image larger to make up for that and its fine now.

ScottR · #4 Mar 8th, 2008, 14:54

What happens if someone with even a high resolution visits the site??

Corey Bryant · #5 Mar 8th, 2008, 15:26

Background images were made to repeat. That is until CSS came along. You might be using something like

Code: Select all

<body background="images/background.jpg">

But you should be using something like

Code: Select all

<body style="background: url('images/background.jpg') no-repeat;">

This will help to prevent the image from repeating. And don't rely on those resolutions. What happens if someone has their history or favorites opened? That will take area from your "real estate". And what happens if you think that the resolution is 1920X1200? But the user makes the browsers open 1280X768? You won't get that in your scripts unfortunately.

Never rely on the user to have their browser maximized as well

masonbarge · #6 Mar 8th, 2008, 15:39

A background image x pixels wide cannot fill a screen whose horizontal resolution is greater than x pixels. If repeat is on, it will repeat, and if repeat is off, you will get plain colored borders. CSS cannot stretch a background image (afaik).

You found the only simple way I know to fix the problem. Another possibility is to center the image and not repeat it, which will at least leave you with something tidier looking in wide resolutions.

It is actually possible to size a background image dynamically, but it's so hard in practice I don't think anyone does it. Basically you have to use a pseudo-background, i.e. put the image in the html, use the browser to resize it and use the z-axis to put the content on top of it. I've never done it, so I don't know if you could use server-side scripting or whether you'd have to use javascript. Also you'd either have to have an image that looked good stretched, or else resize it vertically in proportion to horizontal stretch. Not to mention, browser resizing tends to make an image look terrible.

Actually, with a fairly complex server-side program, you could regenerate the image. Like in PHP, you could read the image file into a temporary table and then regenerate it to fit the precise width of the screen using the gd library, and it should look pretty good. I just can't imagine anyone actually doing it.

Corey Bryant · #7 Mar 8th, 2008, 21:54

Background Object to Fit Screen might help you out some. I know the post is old but I tried it out back then. And some of the links on her post might even lead to a few other better ideas as well if needed.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Screen Res Help Please	diane1984	Web Page Design	6	May 4th, 2007 23:15
Screen resoloution problems on my website.	Marc	Web Page Design	6	Apr 13th, 2007 23:42
Screen Shot	moojoo	Webforumz Cafe	16	Jan 26th, 2007 14:27
Flash screen problems	bejamshi	Flash & Multimedia Forum	2	Oct 16th, 2006 02:34
text size problems	Ice288	Web Page Design	3	Jul 18th, 2005 11:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
different screen size problems