1

I want to make a button like this
enter image description here

This is my current progress
enter image description here

I want to know how to add a background image without blocking the text and icon above.

App.js

import "./styles.css";

import CloudUploadOutlinedIcon from "@material-ui/icons/CloudUploadOutlined";

export default function App() {
  return (
    <div className="App">
      <div
        className="photo__wrapper__img"
      >
        <div className="__photo__wrapper__img__label-container">
          <div>
            <CloudUploadOutlinedIcon style={{ color: "white" }} />
          </div>
          <span>Click here to change photo</span>
        </div>
      </div>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.photo__wrapper__img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: rgba(60, 67, 74, 0.5);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.photo__wrapper__img .photo__wrapper__img__label-container {
  text-align: center;
}

CodeSandbox
https://codesandbox.io/s/loving-volhard-747zr?file=/src/App.js

CCCC
  • 5,665
  • 4
  • 41
  • 88
  • [Here](https://stackoverflow.com/questions/41406509/add-a-profile-picture-in-form-in-html-and-css/41406599) is already a similar way of doing it... – Joel Fah Sep 02 '21 at 03:31

1 Answers1

0

PersonIcon is a component. Not a url so you should put it into outside background. And using position absolute for your text detail.

https://codesandbox.io/s/romantic-cache-8jghq?file=/src/styles.css

Viet
  • 12,133
  • 2
  • 15
  • 21
  • 1
    No, I attached `profile.png` inside the src folder. I will use it as background image – CCCC Sep 02 '21 at 03:42