Center an image that’s too big for the screen?

Asked

Viewed 22 times

0

I have an image that has a height of 100%. However, the width exceeds the lateral limits and the image is cut on the right side and I would like to center it to cut equally on both sides. Here is a Jsfiddle that I made for demonstration

css

  • You want to center the background on Body, or you want to center an element that has an image in the center of Body?

1 answer

1


You can use as background and apply the background-position: center

Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Note: background-position: center can be used directly within background:, as in the example

.foo {
     width: 100%;
}

.foo .cover {
     /* propriedades para centralizar e assim irá aparar igualmente ambos lados */
     background: url(https://i.stack.imgur.com/DD8Pf.jpg) center no-repeat;

     /* a altura exata da imagem */
     height: 1350px;
}
<div class="foo">
    <div class="cover"></div>
</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.