我想给我的组件一个完整的页面背景图像，但是图像没有显示出来。 当我检查开发人员控制台时，所有的css都是好的。

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;
  }
}

有办法解决这个问题吗？