Alex Rivera | Logout

How to center an image that is wider than the browser window (not a background image)

Asked 2011-07-28T20:17:20.997
12

How can I centre a large image to the browser window, so that if it is wider than the window it will still be centred?

See: http://carolineelisa.com/rob/

I did not want to simply make the image a background image, as it changes dynamically to images of different sizes and I want to to be able to scroll down to see them at the correct heights.

However I am open to making it a background image if the height of the container div can change depending on the background image height?

I don't mind having a horizontal scrollbar, but would prefer not to.

Thanks!

css image center
Edit
Report

1 Answer

18
<div style="background:url(/path/to/image.png) center top; width:100%; overflow:hidden">
  <img src="/path/to/image.png" style="visibility: hidden;">
</div>

This... probably will get you where you want.

and the example: fiddle and source

Edit

fixed it: fiddle and source

answered 2011-07-28T21:53:00.113

Your Answer