How to center the browser on the image wider than the site

Question

My site is 900 pixels wide. I have an image that I would like to use wider, 1300 pixels, but still focused on the page. Currently, when I open a page in a browser, I am focused on the left side of the image. I can ctrl + mouse wheel to zoom out and make it closer to my goal. But I don’t want the site’s viewers to do this. How can I fix this easily enough?

Answer 1

I find it best to go with a bit of JavaScript that converts the image from the <img> to a background image:

 <div class="wide-image"><img src="..."></div> 

JavaScript using jQuery (but you can easily do it without it / using another tool):

 ​​$(function() { $('.wide-image').each(function() { var $div = $(this), $img = $div.find('img:first'); // Transform normal image into background image $div.css('background', 'url(' + $img.attr('src') + ') no-repeat center center'); // Adjust the <div>s height to fit the image height $div.height($img.height()); // Hide the original image $img.hide(); }); });​ 

Demo: http://jsfiddle.net/NBKsm/

Answer 2

Do you mean the center of the background image?

background-position: center 0

This should work, as it can take center for value: http://reference.sitepoint.com/css/background-position

Answer 3

try the following:

 margin : 0px auto; 

use this css code where the div is where your img is located.