Small white space showing after the image

Question

So I have that small white space after the image, how can I fix that? Here is code of my class:

.hero-image2 {
  background-image: url("/assets/kava.jpeg");
  width:33%;
  right:0px;
  position: fixed;
  min-height: 100%;
  background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-repeat: no-repeat;
  bottom:0px;
}

And here is the other class which is on left side:

.tekst2 {
 width: 67%;
 position: absolute;
 left: 0px;
 height: 100%;
 font-family: 'Playfair Display', serif;
 font-size: 15px;
}

Here is what it looks like: enter image description here

Can you convert this to a [snippet](https://stackoverflow.com/help/minimal-reproducible-example) so we can reproduce the issue here? — Lewis, Jan 07 '21 at 11:49
you have to share a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) because maybe there is some element after the image which is creating this space. — Mhd Alaa Alhaj, Jan 07 '21 at 11:58
`background-size:cover;` - if the space is caused by wrong proportions. — V.Volkov, Jan 07 '21 at 11:59
I can see no problem there, here is a jsfiddle for your question: jsfiddle.net/yfz0689g — Janos Vinceller, Jan 07 '21 at 11:59
I edited my code, and added other class and how that space looks like. — Jan Tuđan, Jan 07 '21 at 12:02
Okay so you'd like to use the whole height and you've got this little space down there. That's you're problem, right? — Janos Vinceller, Jan 07 '21 at 12:07

score -2 · Answer 1 · answered Jan 07 '21 at 11:49

-2

You can give negative margin bottom value for example margin-bottom=-30px;

answered Jan 07 '21 at 11:49

Can Cuma Yaman

37
1
9

2

**Opinion**: Try and avoid negative margins to fix issues like this if there's an alternative. Unless used correctly, it might affect the layout in ways you aren't expecting. – Lewis Jan 07 '21 at 11:50

Small white space showing after the image

1 Answers1