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

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
Lab_TechAsked:
Who is Participating?
 
BardobraveConnect With a Mentor Commented:
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
 
qwerty021600Commented:
Give background-position: center; for the background-image used,.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.