Whitespace Appears around Background Image

user_15486923 0
Viewed 60

I have the following React snippet:

const CategoryItem = ({ imageUrl, title }) => {
  return (
    <div className='category-container'>
      <div
        className='category-container__bg'
        style={{ backgroundImage: `url(${imageUrl})` }}
      ></div>
      <div className='category-container__body'>
        <h2>{title}</h2>
        <p>Shop Now</p>
      </div>
    </div>
  );
};

and styled as follows using Sass:

.category-container {
  align-items: center;
  border: 5px solid #000;
  display: flex;
  flex: 1 1 30%;
  height: 25rem;
  justify-content: center;
  margin: 10px;
  overflow: hidden;

  &__bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    transition: transform 1.5s ease;
    width: 100%;
  }

  &__body {
    align-items: center;
    background-color: white;
    border: 3px solid black;
    display: flex;
    flex-direction: column;
    height: 7rem;
    justify-content: center;
    opacity: 0.7;
    padding: 0 1.5625rem;
    position: absolute;
    transition: opacity 1s ease;

    h2 {
      color: #4a4a4a;
      font-size: 1.375rem;
      font-weight: bold;
      margin: 0 0.375rem 0;
    }

    p {
      font-size: 1rem;
      font-weight: lighter;
    }
  }

  &:hover {
    cursor: pointer;

    .category-container__bg {
      transform: scale(1.05);
    }

    .category-container__body {
      opacity: 0.9;
    }
  }
}

Although I am using background-size: cover, I am getting a weird whitespace around the background image (shown in the screenshot below). I have tried playing with the border as this sometimes fixes the issue, but it is not working for this case.

Are there any workarounds for this issue?

enter image description here

reactjs frontend css
1 Answers

There could be various workarounds involving pseudo before elements of slightly larger size etc.

The simplest method in this particular case seems to be to set the background color of the parent element.

.category-container {
  align-items: center;
  border: 5px solid #0008;
  display: flex;
  flex: 1 1 30%;
  height: 25rem;
  justify-content: center;
  margin: 10px;
  overflow: hidden;
  background: black;
}

.category-container__bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  transition: transform 1.5s ease;
  width: 100%;
  background-image: url(https://picsum.photos/id/1015/1024/768);
}

.category-container__body {
  align-items: center;
  background-color: white;
  border: 3px solid black;
  display: flex;
  flex-direction: column;
  height: 7rem;
  justify-content: center;
  opacity: 0.7;
  padding: 0 1.5625rem;
  position: absolute;
  transition: opacity 1s ease;
}

.category-container h2 {
  color: #4a4a4a;
  font-size: 1.375rem;
  font-weight: bold;
  margin: 0 0.375rem 0;
}

.category-container p {
  font-size: 1rem;
  font-weight: lighter;
}
<div class='category-container'>
  <div class='category-container__bg'></div>
  <div class='category-container__body'>
    <h2>TITLE</h2>
    <p>Shop Now</p>
  </div>
</div>

user_108674540
Related