Resolution differences

Handling images and content wrappers around resolutions

[Alano]

Hi all,

I am developing my first website and almost done. However, the contents of the pages are contained within a wrapper that I am using to try and centre the content and then have a background image to fill the rest of the screen. This works well except the wrapper is not always centred and also the background image has a join where it repeats. This despite having the attributes of "no-repeat" and "centre" for the background image etc.

How do I have the HTML and CSS handle different browsers and resolutions etc and have things always centred?

Thanks in advance for any guidance

Alanjo

[graeme_p]

CSS expects it to be spelled "center".

Post the CSS yoi use for the background image.

Do you want to centre horizontally, vertically, or both. You centre a wrapper by setting margin to auto on both sides.

[not2easy]

How do I have the HTML and CSS handle different browsers and resolutions etc and have things always centred?

graeme_p is right about centre/center for css. Your question has two parameters though and centering the container with auto margins right and left will take care of centering the content wrapper. The image for the background is a different issue.

For a background image to completely fill the background of a wrapper container, set its width to the width of the container. Note: it will be distorted and change in unpleasant ways when the page size is different for different content or on different screens. These instructions preclude resizing for different screen resolutions.

The best answer is to resize the image to a size that can accommodate the widest resolution, flatten and index the color and save it as a compressed .png file (so it might be a manageable filesize). Then set it to max-width 100%.

To look good at all screen resolutions, it is best to use percentage width for all containers and set all images to max-width of 100%, do not use any font-size settings except in the body css and only set a percentage there. That way it can all resize to fit smartphones, tablets and desktop screens.

With no-repeat setting, the image needs to be able to fill the background, and unless every page on the site has the same content length, there will be issues of distorting the image or having empty whitespace on longer pages. There are ways to have the background scroll but it is usually distracting to the content. Some good reading about all these issues is at A List Apart.