Centered image that's wider than browser window

[levis]

I’m struggling to describe what I mean here – It’s probably why I haven’t found the solution online yet.

Anyway, I have an example here:

http://evablackdesign.com/

Bascially, I am looking to replicate the way the main images “slides” off to the left of the screen (whilst keeping centered) when the browser window is resized. In normal situations, the image would stop and the right hand side of the image would be cropped by the browser window.

Hope this makes sense!

Many thanks in advance…
M

[Paulie_D]

Basically, I am looking to replicate the way the main images “slides” off to the left of the screen (whilst keeping centered)

It is a very wide image (1570px) but it’s a background image with background-position: 50% 50%…which is, I think, teh same as background-position:center center.

[lschoen114]

So what you’re going to want to do is start with the div with a width of 100%. In that particular case, the width is 100% and the height is 500px.

Then you use make the background:

#div class {
background: url(http://evablackdesign.com/wp-content/uploads/2013/02/homepage-3.png) center center no-repeat;
}

In this case, since you don’t want to image size to change, make sure you set a min-width for the image, or let it stop at some number that you choose. (Like if you don’t need it to go beyond 1920px wide)

[levis]

Awesome, thanks for your help!

Also, I’ve noticed on the eva black design that the image stretches further (both vertically and horizontally) when expanded above 1600px (or thereabouts) so that you can never see further than the image itself. I have had a go and set the width to 100%, when the browser width exceeds the width of my image, to no avail…

[Paulie_D]

I think it’s because it’s using the background-size:cover property although they have added ** !important** to it too.

[levis]

You are a star!

[Author]

Posts