CSS Background paths not working

[fordburgess]

Hello, 

I have a seemingly simple yet very annoying problem. All I am trying to do is set a background for a div in a module that I'm creating, yet when I preview the module, no background ever shows up. So far I have tried:

With the image in an adjacent folder to the folder of the module I'm working on.

#container {
  height: 50vh;
  width: 100vw;
  background-image: url(../images/christmas-background.jpg);
}

I tried moving the image in to the same folder 

#container {
  height: 50vh;
  width: 100vw;
  background-image: url("./christmas-background.jpg");
}

I have tried referencing an image field

I have tried using the image path in-line

<div id="container" style="background-image: url(../images/christmas-background.jpg);">
</div>

I have tried removing the quotes from my path, changing the amount of dots at the beginning of the path. I made a folder with an HTML file and CSS file and image folder in VSCode and tested it in my browswer just to see if I'd inexplicably forgotten how to set a background image, but the first thing I tried worked, so I believe this is some finicky issue with Hubspot that I am not aware of because I'm new. Sorry for the rudimentary question, but this doesn't make any sense.

[amwilie · Accepted solution]

With CSS things can get kind of wonky with relative links due to HubSpot's minification of stylesheets. I would try using get_asset_url() around your path to get an absolute link to the file (that is if this is in an external .css file, I don't believe HubL works in module.css).

#container {
  height: 50vh;
  width: 100vw;
  background-image: url({{ get_asset_url('../images/christmas-background.jpg') }});
}

On the screenshot you provided where your referencing an image field you're missing the url() around the path is why that one isn't working. Should be:

<div id="container" style="background-image: url({{ module.background_image.src }});"></div>

[fordburgess]

Hello again @amwilie ,

Thank you very much, this works!