Solved

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

Posted on 2010-08-27
2
360 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

863 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now