CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 115

Cant use overflow-x: hidden on image

I have this image the top of my page that gets smaller with the window until a certain point where it needs to keep its size and stay in the middel while doing so. It is at this point that the right side of the image is beginning to "overflow" to the right. I feel that I have tried everything, but nothing works. Here is a part of my code:

html

<div class="imageThing"></div>

css

.imageThing {
  position: absolute;
  overflow-x: hidden;
}

@media (min-width: 1071px) {
  .imageThing {
    opacity: 0;
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera */
    animation: fadein 1s;
    animation-delay: .25s;
    animation-fill-mode: both;
    background: #fff url('https://cdn.glitch.com/57cbb378-055c-4d36-a029-5a44e3138ccd%2Fhuekast.jpg?1549906076009') 0px 0px no-repeat ;
    background-size: 100vw 30.15vw;
    height: 30.15vw;
    width: 100vw;
    top: 0px;
    left: 0px;

  }
}

@media (max-width: 1070px) {
 .imageThing {
    background: #fff url('https://cdn.glitch.com/57cbb378-055c-4d36-a029-5a44e3138ccd%2Fhuekast.jpg?1549906076009') 0px 0px no-repeat ;
    background-size: 1070px 322px;
    height: 322px;
    width: 1070px;
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera */
    animation: fadein 1s;
    animation-delay: .25s;
    animation-fill-mode: both;
    left: 50%;
    margin-left: -535px;
    overflow-x: hidden;
  }
}

I reale hope that you are able to help me. Thank you in advance

Upvotes: 0

Views: 79

Answers (1)

sn3p
sn3p

Reputation: 746

overflow only works for children inside the element, not for background images. You can use background-position: center; to center the background image. And maybe suitable in your case, you could try using background-size: cover; for a "perfect fit".

cover

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

Reading your comments I guess this is the desired result:

CodePen

that gives the right effect, but the image needs to be position: absolute;, because it needs to overlap with something else

How about this?

CodePen

Upvotes: 3

Related Questions