Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2010-08-27
2
Medium Priority
?
366 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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 …

688 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