CMS Development

fordburgess
Member

CSS Background paths not working

SOLVE

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

fordburgess_0-1670337376522.png

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.

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

CSS Background paths not working

SOLVE

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>

 

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

0 Upvotes
2 Replies 2
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

CSS Background paths not working

SOLVE

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>

 

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
fordburgess
Member

CSS Background paths not working

SOLVE

Hello again @alyssamwilie ,

 

Thank you very much, this works!

0 Upvotes