Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2010-08-27
2
Medium Priority
?
367 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 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

916 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