Background image layout issue

views:

answers:

+2 Q:

Background image layout issue

A client wants to have an image that takes up entire screen, on mouse over the menu would appear. The problem is the height vertical alignment for various screen sizes....What would be the most common sleek looking solution to this issue? Let's assume that the most common screen resolution for the site's audience is 1024x768 but it should look good on smaller resolutions too (specifically for laptops).

My initial idea was to use an image such as 1000x600 and black background...any other ideas?

Thanks!

+1 A:

Compare the aspect ratio of the screen with the aspect ratio of the image, then scale the image appropriately. For example, if the aspect ratio (width / height) of the screen is larger than the aspect ratio of the image, then it's too wide - so scale the width of the image but keep the height the same size as the viewport. Visa versa for if it's smaller. I think you can use PHP to achieve what you want.

Dan Mantyla 2010-04-07 00:31:01

sounds like a hack. i am interested in proper css/html way of doing it. I am no going to manipulate background images with php.

gnomixa 2010-04-07 00:44:30

Call it a "hack", but you asked for the most sleek way of doing it. This is a programming site, so I just assumed you where asking a programming question.

Dan Mantyla 2010-04-07 00:59:30

it's a layout question - layouts are done with html and css. But even if I were to use your advice, it's confusing and not detailed enough - screen resolution is a client side parameter, php runs server side, so you should have been more specific in your answer. Normally, layouts are optimized for one screen resolution and coded to show gracefully for others. I am asking what people do to optimize for 1024x768 screen.

gnomixa 2010-04-07 02:56:00

You're right, you wouldn't want to try something like what I described for controlling the layout of a web page. At first I thought this about dealing with graphics of a desktop application, didn't realize it for web stuff. IMO have a fixed width - around 900 - and position it in the center of the screen using margins. Just use Blueprint or YAML.

Dan Mantyla 2010-04-07 16:38:35

ansaurus

tags:

views:

answers:

Background image layout issue

related questions