0

I am new to react, I have been trying to implement parallax effect I have currently defined -

<section className="section parallax backgroundImageProp"></section>

and I am using the css to provide the background Image -

.backgroundImageProp::after{
background-image: url('https://republic-prod.azureedge.net/republic-prod/stories/promolarge/xxhdpi/15207762165aa53418177b5.jpeg');
background-repeat: no-repeat;

}

Currently the image is hardcoded I want it to be rendered dynamically, but I am unable to do so after multiple attempts, I am using the below style to add the css - 

var backgroundImageAfter = {
  after:{backgroundImage:'url(' + image_url + ')'},
};

<section className="section parallax" style={backgroundImageAfter}>
</section>

but this also did not help. I am missing something here. Please help.

Doğa Gençer
  • 124
  • 3
  • 15
Praveen Pandey
  • 401
  • 1
  • 4
  • 12

1 Answers1

0

You have to add a div with style={backgroundImageAfter} after section element and remove the after from the style object.

var backgroundImageAfter = {
  backgroundImage:'url(' + image_url + '),
};

<section className="section parallax">
</section>
<div style={backgroundImageAfter}></div>
Jorge Altieri
  • 134
  • 1
  • 6