title: Unable to add background image to Plotly Express data visualization
body: <p>I'm trying to use a background image in Plotly Express but it never seems to show up. I've tried various other options on StackOverflow but none have worked so far. Here's the code that I'm working with currently:</p>
  <pre><code>fig = px.scatter(df, x=&quot;X&quot;, y=&quot;Y&quot;, color=&quot;teamId&quot;, hover_name=&quot;NickName&quot;, animation_frame=&quot;GameTime&quot;, animation_group=&quot;NickName&quot;, range_x=[-4,110], range_y=[-4,72], size='size', size_max=8, width=900, height=700, color_discrete_map=color_discrete_map, title=&quot;Animated Match Recreation&quot;)
  
  # Remove side scale and hide zero and gridlines
  fig.update_layout(
      coloraxis_showscale=False,
      xaxis=dict(showgrid=False, zeroline=False),
      yaxis=dict(showgrid=False, zeroline=False),
  )
  # Disable axis ticks and labels
  fig.update_xaxes(showticklabels=False)
  fig.update_yaxes(showticklabels=False)
  fig.update_xaxes(title_text='')
  fig.update_yaxes(title_text='')
  
  # Background image file
  image_file = 'WhitePitch.png'
  image_path = os.path.join(os.getcwd(),image_file)
  
  fig.add_layout_image(
          dict(
              source=image_path,
              xref=&quot;x&quot;,
              yref=&quot;y&quot;,
              x=0,
              y=0,
              sizex=100,
              sizey=70,
              sizing=&quot;stretch&quot;,
              opacity=0.5,
              layer=&quot;below&quot;)
  )
  
  # Sets background to white vs grey
  fig.update_layout(template=&quot;plotly_white&quot;)
  
  app = dash.Dash()
  app.layout = html.Div([
      dcc.Graph(figure=fig)
  ])
  
  app.run_server(debug=True, use_reloader=False)
  </code></pre>
  <p>Any helpful hints would be much appreciated! Thanks.</p>
  <p><a href="https://i.stack.imgur.com/yFNiC.png" rel="nofollow noreferrer">Here is a picture of the result currently. I'm trying to add a football pitch as a background</a></p>