arigoldx
commented
3 months ago Fwiw, I found a solution to adding a background image on a Card.
Again, this presumes that the "right" / "mui best practices" way to code a login page (as per the image above) with a background image is using a Card. Seems like something called "CardMedia" would be.
First you use require to get the image:
const heroImage = require('../../assets/images/hero-images/cool-image.jpg');
then you use the sx property on Card using backticks and the url css function:
<Card sx={{backgroundImage: `url(${heroImage})` }}>
I'm admittedly still learning the best way to get images when using webpack (which, I've learned, is bundled with create-react-app). Maybe it's an import? Maybe it's a require? Would love articles to read on that if you have :bow:.
ZeeshanTamboli
mi-na-bot
aarongarciah
Related page
https://mui.com/material-ui/react-card/
Kind of issue
Unclear explanations
Issue description
The text for Card Media states:
but I cannot figure out how to make a background image using CardMedia. The image displays above the CardContent. CardMedia is not meant to be used as a background for the Card and it's description in the docs should be updated.
Context
Simply put, I'd like to add a background image for the card. Something like this (which I found on the web after searching for "login screen with background image"):
Search keywords: card, media, background image