Solved

Centering an image in a browser regardless of browser / screen size?

Posted on 2010-08-27
2
363 Views
Last Modified: 2012-05-10
Probably a very simple thing to fix but nonetheless I have not really come up with a solution that addresses this problem.

Basically, I have a webpage that features a background template (a JPEG File). For example, look at the experts exchange site. Imagine the white part being the background template. The grey on the left and right sides changes in width depending on your browser (if it's maximized or not) and your screen width, but regardless, the middle white part remains centered and balanced. It doesn't stretch and distort.

So I guess what I am looking for is a code example in HTML to show me how to do this?

Thanks,
Lab_Tech
0
Comment
Question by:Lab_Tech
2 Comments
 
LVL 19

Accepted Solution

by:
Bardobrave earned 250 total points
ID: 33541138
Normally this type of behaviour is made reversely as you're thinking on it:

Here, the background of the page should be black/grey, and your content div should have a white background. So this way, you can give a fixed width to your content DIV, and position it on center through align="center", all the rest of the space that won't be covered by your content DIV will be displayed in page's color background.

I hope this help you.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 33541142
Give background-position: center; for the background-image used,.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
I am having a  Git   issue 6 42
removing a class in javascript 4 50
Html Newline 7 21
Web Easy Professional 10 Embedded Facebook 1 18
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question