# CSS Background paths not working

**URL:** <https://community.hubspot.com/t/css-background-paths-not-working/70644>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [December 6, 2022, 2:40pm UTC](https://community.hubspot.com/t/css-background-paths-not-working/70644 "2022-12-06T14:40:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fordburgess](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fordburgess](https://community.hubspot.com/u/fordburgess)\
**Post date:** [December 6, 2022, 2:40pm UTC](https://community.hubspot.com/t/css-background-paths-not-working/70644/1 "2022-12-06T14:40:27Z")

</div>

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.

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

```

I tried moving the image in to the same folder

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

```

I have tried referencing an image field

 ![fordburgess_0-1670337376522.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/9/b902c4e66f0801e87cb181734c400db3f7701e48.jpeg)

I have tried using the image path in-line

```lia-code-sample
<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.

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [December 6, 2022, 7:28pm UTC](https://community.hubspot.com/t/css-background-paths-not-working/70644/2 "2022-12-06T19:28:17Z")

</div>

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).

```lia-code-sample
#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>`

---

<div class="post-metadata">

**Author:** ![fordburgess](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fordburgess](https://community.hubspot.com/u/fordburgess)\
**Post date:** [December 6, 2022, 9:03pm UTC](https://community.hubspot.com/t/css-background-paths-not-working/70644/3 "2022-12-06T21:03:29Z")

</div>

Hello again @alyssamwilie ,

Thank you very much, this works!