CSS background-image renders as url('undefined

Question

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 background image just fine with the following code:

(React/JSX):

<section className="hero-section" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/bg.jpg')" }> </section>

But when I try that same method with the four other images:

<div className="propertie-item set-bg" style={ { backgroundImage: "url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/propertie/1.jpg')" } }></div>

It doesn't load. When I inspect element, I see this:

<div class="propertie-item set-bg" style="background-image: url("undefined");"></div>

I did define the URL in my code but for some reason it isn't getting passed through.

Yet when I view the network tab, all of the image requests received 200 responses

Really not sure why it works for the hero's background image but not for the sub-categories.

You can go to housessoldeasily.netlify.com for a working static-version of the site. This is not the React version of the site.

Here is a Github link to the component where the background image loads fine:

https://github.com/jfny/custom-everything/blob/master/client/v1/src/components/homepage/HeroSection.js

Here is a Github link to a component where I try the exact same thing but the background doesn't load:

https://github.com/jfny/custom-everything/blob/master/client/v1/src/components/homepage/PropertiesSection.js

If anyone has any insight it would be appreciated. Thanks.

Answer 1

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.

Answer 2

@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

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

CSS

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

}