Css Background-image Renders As Url('undefined'); Even Though I Defined It. (jsx)

This is how my landing page should load: This is how my landing page does load: On the page that renders wrong, the code for hero, which is cut off at the top, loads the backgrou

Solution 1:

@J. Doe, I got your problem. It is worth raising an issue with react team to debug more. But the route cause/fix i have in place is as below. Hope that helps!

Root cause:

When series of css class names have -, the inline url is set to undefined.

Workaround: (either one of the below)

• Remove the additional class set-bg.
• Replace the - in the class names.

Sample html

<divclassName="col-md-6"><divclassName="propertie-item set_bg"style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/propertie/4.jpg')" } }><divclassName="rent-notic">FOR Rent</div><divclassName="propertie-info text-white"><divclassName="info-warp"><h5>339 N Oakhurst Dr Apt 303</h5><p><iclassName="fa fa-map-marker" /> Beverly Hills, CA 90210</p></div><divclassName="price">$3000/month</div></div></div></div>

CSS

.set_bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;

}

Solution 2:

I'm not sure if you are the author of this template, I've been using this template and trying to modify it to let it suit my own use. I encountered the same problem as you did, if you look at the template's bundle there is a js file in js/main.js, open it up and look for the "background set" commented section:

$('.set-bg').each(function() {
    var bg = $(this).data('setbg');
    $(this).css('background-image', 'url(' + bg + ')');
});

The problem is when the browser loads the code, whatever is inside of the (function(){...})() gets executed immediately even before the page(html file) has loaded, if it happens(in this case it always happens), the JavaScript interpreter will not find any html elements belongs to class 'setbg' because there is no html file.

The solution I did is to put whatever code you need(not just the utility of 'setbg') into that $(window).on('load',function(){...}) and get rid of the old code.

Hope this helps.