Image doesn't show up in div

Question

I want to give my component a full page background image, but the image doesn't show up. When i check the developer console, all the css is good.

import React from "react";
import "./about.styles.scss";


const AboutPage = () => {
  return (
    <div className="about">
      <div className="background-image">
        <div className="aboutText">Some text</div>
      </div>
    </div>
  );
};

export default AboutPage;

CSS:

.background-image {
  background: url("https://i.ibb.co/TYpKc61/bg.jpg");
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;

  position: relative;
  width: 100%;
  height: 100%;

  text-align: center;


  .aboutText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 5rem;
  }
}

Any idea how to solve this problem?

Answer 1

You need to give the container with className="about" some dimensions so the relative dimensions styles of background-image will be applied (like width: 100%; ).

.about {
  height: 100vh;
  width: 100vw;
}

.background-image {
  width: 100%;
  height: 100%;

  ...
}