4

My site is 900px wide. I have an image I'd like to run wider, 1300px, but still be centered over the page. Currently, when I open the page in a browser, i am centered on the left side of the image. I can ctrl+mouse wheel to zoom out and have it be closer to what my goal is. But I don't want site viewers to have to do this. How can I fix this reasonably easily?

Aristos
  • 66,005
  • 16
  • 114
  • 150
MVC_Future_Guru
  • 239
  • 4
  • 15
  • Maybe this is: http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only – Aristos Oct 15 '12 at 21:50

3 Answers3

1

I believe your best bet is to go with a bit of JavaScript that transforms the image from a <img> tag into a background image:

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

JavaScript using jQuery (but you can easily do this without it / with some other 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's height
        $div.height($img.height());        

        // Hide the original image
        $img.hide();
    });
});​

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

Niko
  • 26,516
  • 9
  • 93
  • 110
0

You mean center a background-image?

background-position: center 0

That should work since it can accept center for a value: http://reference.sitepoint.com/css/background-position

TheZ
  • 3,663
  • 19
  • 34
0

try this one:

margin : 0px auto;

use this css code in which div's class where your img is there.

Sajad Bz
  • 31
  • 2