How to center crop a full screen background image

Question

Stack Overflow seems to be full of similar questions but I haven't found a satisfying answer for my use case. Basically, I need a responsive, full screen background image for the top part of my front page. Means, narrowing the viewport leads to cropping, not stretching; the image should be centered. I'd like to avoid JS for this.

Aaron created a fiddle that almost looks like what I'm searching for. Two problems:

Strange behaviour when narrowing viewport (below 500px width)
position: fixed;

I was able to reproduce the solution of Bryce Hanscomb and Gabriela Gabriel for a container (see my fiddle):

But I failed to extend this to full screen. This is my code (see fiddle):

HTML:

<div id="background">
    <img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>

CSS:

div#background {
  background-color: orange;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: -1;
}
img {
  left: 50%;
  position: relative;
  transform: translate(-50%, 0);
  min-height: 100%;
  min-width: 100%;
}

Problem #1: The image doesn't take up the full height of its parent div (with min-height set to 100%).

Problem #2 + #3: In a narrow viewport, the image is cut off on the right (not centered), and a horizontal scrollbar is shown.

As a side note, can somebody tell me where those 4 pixels come from?

I'm just asking for more info: You want your image to take up the entire height and width of the background container? (in your fiddle, that's 100% high and wide) If so, try `position:absolute` on your image, it will stay centered and fill the background container — ntgCleaner, Jul 30 '15 at 15:55
Also, do you have any issues with using a CSS `background-image` instead of an actual ``image? — ntgCleaner, Jul 30 '15 at 15:56
I'm having the same idea/question as @ntgCleaner where this might be more easily accomplished as a background-image in css because the background-image property has really nice 'sister properties' like background-size and background-position. Background-size allows you to use values like 'cover' and 'contain' which are very usefu. Also, background-position allows you to use the value 'center center' which will position it right in the middle of your container. If this is a viable option, let me know and I'll offer a more detailed solution. — Rich Finelli, Jul 30 '15 at 16:08
Man, can't believe it was that simple. `position: absolute` on the img actually did the trick. [I updated the fiddle.](http://jsfiddle.net/stbn/57pjjk21/3/) After having spent so much time on something that simple, I hope it can be useful for others... @ntgCleaner, how about you post an answer that I can accept? — Andrej Stieben, Jul 30 '15 at 16:17
`background-image` doesn't work, I think, because a 100% from the top (that's just under the full screen image), I want to have different content. — Andrej Stieben, Jul 30 '15 at 16:19

score 2 · Accepted Answer · answered Jul 30 '15 at 16:19

Your image will fill the entire space and also not have the problem of not being centered if you use position:absolute on your image

div#background {
  background-color: orange;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: -1;
}
img {
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  min-height: 100%;
  min-width: 100%;
}

score 1 · Answer 2 · answered Jul 30 '15 at 16:19

The issue with the 4px at the bottom is because images always align to the top just like text, this also adds a bit of padding to the bottom to make the baseline for the text so that letters can hang down under the rest.

If you set vertical-align: bottom it should fix it like so:

h1 {
  text-align: center;
}
div#container {
  background-color: black;
  height: 200px;
  width: 100%;
  margin: 50px auto;
}
div#content {
  background-color: orange;
  min-width: 100%;
  overflow: hidden;
}
img {
  left: 50%;
  position: relative;
  transform: translate(-50%, 0);
  vertical-align: bottom;
}

<div id="container">
  <div id="content">
    <img src="//dummyimage.com/600x200/0099cc/fff.png" />
  </div>
</div>

For the centre aligning of the image, I would personally recommend actually using css background-image and then setting the background-position like so:

div#background {
  background-color: orange;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  background: url(//dummyimage.com/600x200/0099cc/fff.png) center center no-repeat;
  background-size: cover;
}

<div id="background">
</div>

thanks for your valuable input. That background image approach looks like a good alternative. — Andrej Stieben, Jul 30 '15 at 16:38

How to center crop a full screen background image

2 Answers2