Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

not loading css background images in dev or build

See original GitHub issue

I’m having difficulty with some background images not loading. I’ve made some significant modifications to the initial create react app, my folder structure is now as follows:

Note: I have omitted some files & folders, if you need more please let me know.


Here are the steps I take to create this issue:

$ cd src/server && npm run dev

This will boot up the dev server and open the browser to my app, everything is working fine except for some elements on the page not displaying a image.

Note: I load in an image yeti-hello.png and this renders fine.


import React from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import yeti from './images/yeti-hello.png';

const Footer = function(props) {
  return (
      <Yeti />
      <Trees />

const Yeti = function(props) {
  return (        
        className="yeti yeti--xs"

const Trees = function(props) {
  return (        
      <div className="trees">
        <div className="trees__tree trees__tree--1"></div>
        <div className="trees__tree trees__tree--2"></div>

  <Footer />,


.trees {
    bottom: 0;
    height: 110px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1;

.trees__tree {
    background-size: 30px;
    background: url('../images/tree.png') no-repeat;
    float: left;
    height: 50px;
    width: 30px;

.trees__tree--1 {
    margin: 0 0 0 6%;

.trees__tree--2 {
    margin: 2% 0 0 4%;

When I inspect the elements in Chrome, the path to the images appears to be correct. When I hover over the path to the image in the styles tab of my inspector the image appears.

styles source

Note that the path for the image I import is similar to the path for the background image:

enter image description here

If I were to import the tree.png as import tree from './images/tree.png'; and change my two <div> elements to <img src={tree} role="presentation" className="trees__tree trees__tree--1" /> and <img src={tree} role="presentation" className="trees__tree trees__tree--2" /> the images will of course load.

How can I get the background images to display? I have other background images in the app that are not loading so the previously mentioned bandaid will not help me. I’m afraid to eject my app and mess with the configuration.

I’m also having the same problem when I build the app.

If you need to see more of the source you can view it at but bare in mind I have simplied this example to isolate the problem. The issue I am having is actually in the Footer.jsx and Footer.css

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

j-quellycommented, Dec 1, 2016

Ahh yes, definitely an issue with CSS. Thanks for the help everyone! The question is also on stackoverflow if anyone wants to post the answer:

existentialismcommented, Dec 1, 2016

The issue looks like your CSS…

The background-size needs to be after the background prop (context).


Read more comments on GitHub >

github_iconTop Results From Across the Web

create react app not loading css background images in dev or ...
The issue was purely an issue with CSS in the App.css file: App.css .trees__tree { background: url('../images/tree.png') no-repeat; ...
Read more >
How to fix CSS background-image not working | HTML/CSS
1. Check that your CSS file is linked correctly in your HTML file. · 2. Make sure the image path is set correctly...
Read more >
CSS Background Image Not Working - Position Is Everything
Not working background image in css It is often very difficult to work with background images in CSS. This causes problems like CSS...
Read more >
Browser-level image lazy loading for the web -
This post covers the loading attribute and how it can be used to control the loading of images.
Read more >
Fix CSS background image url not displaying ... - YouTube
Fix CSS background image url not displaying showing working in HTML CSS | Problem Solved Show SupportBuy Me a COFFEE: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found