# Custom module {% scope\_css %} stopped working

**URL:** <https://community.hubspot.com/t/custom-module-scope-css-stopped-working/112205>\
**Category:** CMS Development\
**Created:** [July 17, 2024, 3:55pm UTC](https://community.hubspot.com/t/custom-module-scope-css-stopped-working/112205 "2024-07-17T15:55:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jestlinbaum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jestlinbaum/32/68653_2.png) [@jestlinbaum](https://community.hubspot.com/u/jestlinbaum)\
**Post date:** [July 17, 2024, 3:55pm UTC](https://community.hubspot.com/t/custom-module-scope-css-stopped-working/112205/1 "2024-07-17T15:55:15Z")

</div>

I have a module that I’ve been using on multiple sites that has worked fine for a long time.

It’s a module created to be a flex container with one side having text and one side having an image.

For the image side there is a choice module for “Image Style” to be static or background.

Static = just placing the image inside the div. This works fine.

Background= making the image the background of the div.

When background is selected it gives the div an additional class of “background”

Then I am target that div with css:

```lia-code-sample
{% require_css %}
<style>
{% scope_css %}

.it-flex .img-block.background {
background-image: url({{ module.side_image.src }});
background-size: cover!important;
background-position: center center!important;
background-repeat: no-repeat!important;
}

{% end_scope_css %}
</style>
{% end_require_css %}

```

The issue is that when I use the background option, the css is not outputting anything.

 ![Screenshot 2024-07-17 at 11.40.38 AM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/0/20b61a9998e7e5f19cbe54e75d76ce0059b3fd26.jpeg)

If I remove the background-image property from the css. It outputs the rest of the css.

 ![Screenshot 2024-07-17 at 11.42.28 AM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/5/a564f76167e5432fb045b04c1ee5587e20b64927.jpeg)

When I move the block of css out of {% scope\_css %} and put it into the module.css section, it outputs but the URL is missing.

 ![Screenshot 2024-07-17 at 11.46.16 AM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/7/077bc5148b63ef0ef4fe8e1946e14f51952aba09.jpeg)

The static choice works fine. and {{ module.side\_image.src|pprint }} outputs the url string.

As I said before, I’ve used this method plenty of times and it simply stopped working yesterday (7/16/24).

Is there a reason why this would stop working?

Full module code posted below. Any insight is greatly appreciated!

```lia-code-sample
{% require_css %}
 <style>
 {% scope_css %}

 .it-flex {
 background: {{ module.background_color.color }};
 color: {{ module.text_color.color }};
 align-items: center;
 }

 .it-flex .img-block.background {
 background: url({{ module.side_image.src }});
 background-size: cover!important;
 background-position: center center!important;
 background-repeat: no-repeat!important;
 }

 {% end_scope_css %}
 </style>
{% end_require_css %}

<section class="flexer it-flex {% if module.layout == "row-reverse" %}reverse{% endif %}">
 <div class="flexer img-block {{ module.image_style }}">
 {{ module.side_image.src|pprint }}
 {% if module.image_style == 'static'%}
 {% if module.side_image.src %}
 {% set sizeAttrs = 'width="{{ module.side_image.width|escape_attr }}" height="{{ module.side_image.height|escape_attr }}"' %}
 {% if module.side_image.size_type == 'auto' %}
 {% set sizeAttrs = 'width="{{ module.side_image.width|escape_attr }}" height="{{ module.side_image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% elif module.side_image.size_type == 'auto_custom_max' %}
 {% set sizeAttrs = 'width="{{ module.side_image.max_width|escape_attr }}" height="{{ module.side_image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% endif %}
 {% set loadingAttr = module.side_image.loading != 'disabled' ? 'loading="{{ module.side_image.loading|escape_attr }}"' : '' %}
 <img src="{{ module.side_image.src|escape_url }}" alt="{{ module.side_image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>

 {% endif %}
 {% endif %}

 </div>
 <div class="flexer content-block">
 <div class="copy-wrap">
 {{ module.side_copy }}
 </div>
 </div>
</section>

```

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [July 18, 2024, 11:54pm UTC](https://community.hubspot.com/t/custom-module-scope-css-stopped-working/112205/2 "2024-07-18T23:54:00Z")

</div>

Hi @jestlinbaum 👋 Thanks for your question. And thank you for including your details. I’d like to invite some of our amazing community champions to the conversation — @alyssamwilie @Jnix284 @Stephanie-OG, do you have any ind=sight you can share with @jestlinbaum?

Thank you very much for taking a look! — Jaycee

---

<div class="post-metadata">

**Author:** ![jestlinbaum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jestlinbaum/32/68653_2.png) [@jestlinbaum](https://community.hubspot.com/u/jestlinbaum)\
**Post date:** [July 19, 2024, 2:02pm UTC](https://community.hubspot.com/t/custom-module-scope-css-stopped-working/112205/3 "2024-07-19T14:02:22Z")

</div>

Added single quotes and its working:

Not sure why it’s worked for so long without them. Feel free to close this thread. Thanks [@Jaycee\_Lewis](https://community.hubspot.com/t5/user/viewprofilepage/user-id/127074) for taking the time.

`background: url('{{ module.test_image.src|escape_url }}');`

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [July 19, 2024, 3:06pm UTC](https://community.hubspot.com/t/custom-module-scope-css-stopped-working/112205/4 "2024-07-19T15:06:40Z")

</div>

Hey, @jestlinbaum 👋 Thanks for taking the time to let us know what worked! — Jaycee

---

<div class="post-metadata">

**Author:** ![jestlinbaum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jestlinbaum/32/68653_2.png) [@jestlinbaum](https://community.hubspot.com/u/jestlinbaum)\
**Post date:** [July 19, 2024, 1:39pm UTC](https://community.hubspot.com/t/custom-module-scope-css-stopped-working/112205/5 "2024-07-19T13:39:50Z")

</div>

I made a simple module with only an image feild to simply test the background image property.

```lia-code-sample
{% require_css %}
 <style>
 {% scope_css %}

 .background-test {
 height: 200px;
 background: url({{ module.test_image.src|escape_url }});
 background-size: cover!important;
 background-position: center center!important;
 background-repeat: no-repeat!important;
 }

 {% end_scope_css %}
 </style>
{% end_require_css %}

<div class="background-test">
</div>

```

This did not work.

![Screenshot 2024-07-19 at 9.36.32 AM.jpg](https://d2qpr2jzcazej7.cloudfront.net/optimized/3X/c/0/c049325ebb129bd79eb901a6556962281cdc781f_2_690x61.jpeg)

This does work:

```lia-code-sample
{% require_css %}
 <style>
 {% scope_css %}

 .background-test {
 height: 200px;
 background: red;
 }

 {% end_scope_css %}
 </style>
{% end_require_css %}

<div class="background-test">
</div>

```

This works fine:

 ![Screenshot 2024-07-19 at 9.39.02 AM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/d/0dd601cef11b628494862beffca73e74bd5b46f3.jpeg)