background image using html inline styles is not working

This a 🐛 bug report

I’m trying to use HTML inline styles to show a background image to a div. This is done inside HTML

code directly.

🎛 Configuration (package.json)

  "scripts": {
    "start": "parcel index.html"
  }

🤔 Expected Behavior

I expect images to work using the inline style background image even if the URL is local

😯 Current Behavior

the image does not appear and

When i open the URL of the image ‘localhost:1234/images/image.jpg’

it is like opening localhost:1234

This only happens when I use a local image, if I use an image URL, it works normally.

💁 Possible Solution

images works using the inline style background image even if the URL is local

🔦 Context

Im trying to use an image slider that fills the whole window. That is why i need to inline image background URLs inside HTML

💻 Code Sample

This does not work

<div class='bg' style="background: url('./images/april-2015.jpg') no-repeat center center fixed"></div>

This works

<div class='bg' style="background: url(http://news.images.itv.com/image/file/626702/img.jpg) no-repeat"></div>

🌍 Your Environment

Software Version(s)
Parcel latest
Node latest
npm latest
Mac

3 thoughts on “background image using html inline styles is not working