homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Resolution differences
Handling images and content wrappers around resolutions
Alano




msg:4637840
 11:07 am on Jan 16, 2014 (gmt 0)

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




msg:4637841
 11:30 am on Jan 16, 2014 (gmt 0)

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




msg:4637937
 3:31 pm on Jan 16, 2014 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved