Is there a way to set the backgroundImage on just one component in a React project? When I attach it to the body element, it shows as the backgroundImage for all components. However, if I assign it to the .wrapperContainer element of the current component, it displays differently.
My goal is to achieve this desired output without the background image showing up on all other components:
CSS:
body {
background: url("../../services/images/hehe.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
animation: increase 60s linear 10ms infinite;
-webkit-transition: all 5.2s ease-in-out;
-moz-transition: all 5.2s ease-in-out;
-ms-transition: all 5.2s ease-in-out;
-o-transition: all 5.2s ease-in-out;
transition: all 5.2s ease-in-out;
z-index: -2;
background-color: #f6f8fa;
}
React:
return (
<div className="wrapperContainer"> /*This is the element i replace .body with*/
<Card className="wrapperCard">
xxxxxxx
xxxxx
xxx
</Card>
</div>
)