Background image style tag

Support
#1

I am using background images, when I set a static background image the HTML follows this pattern:

div class=“x-bg-layer-lower-image” data-spai-exclude=“none” data-spai-bg-on=“1” style="background-image: url(“https://cdn.shortpixel.ai/x96/q_glossy+sc_0x211:800x110:1600x220+to_auto+ret_img/wp-content/uploads/2025/11/snowymountains-2.avif”) !important;" data-spai-lazy-loaded=“true” data-spai-bg-prepared=“1” data-spai-bg-lazyloaded=“1”>

The key bit being: style="background-image

If I pull the image URL from a looper and set it dynamically, I get this:

a class=“x-div e199050-e58 m49l6-2g m49l6-2k m49l6-2l m49l6-2m m49l6-2o m49l6-2q m49l6-2r m49l6-2s” style="–tco-dc49l6-a:url(https://ags-s3-amazon.s3.eu-west-2.amazonaws.com/wp-content/uploads/2024/03/Class-7_Giants-Castle-Drakensberg.jpg);" href=“https://agsnew.com/news/ags-photographic-competition-2024/”>

The change being to this style="–tco-dc49l6-

This breaks my ShortPixel processing and is incorrect anyway, it should still be a background image.

Any ideas?

Thanks, Bill.

#2

Hi Bill,

Thanks for reaching out.
It seems that the Looper Field is having the background-image attribute added. If that is the case, please check by adding only the value of background-image and setting it through a loop.

style="background-image:url({{dc:looper:field key='bgimage'}});"

Assuming the field name is bgimage. If that does not work, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specify the page and section where you have implemented it.

To create a secure note, click the key icon underneath any of your posts.

secure-note
secure-note1040×250 15.3 KB

Thanks

#3

I made a test page, with one static background and one looper background, which shows the difference: https://agsnew.com/background-css/

#4

The image set by a looper on the Div ought to be style=“background-image” without me having to mess about with CSS.

#5

Hi Bill,

While setting the background image using the Background Layer options using Dynamic Content tags, it set some values for the background-image attribute with --tco with some random alphanumeric values like --tco-dc5l6r-0, which were processed as the background image. But while setting the image directly, it will be applied to the background-image as the second example in your test page.

Hope I am able to clarify it.
Thanks

#6

I know that and it isn’t right. The image set using DC should also have the style background-image. Why is it happening? It’s not me that’s setting that random style tag, it’s Cornerstone. Can you dig into this properly please.

@Charlie - the above isn’t the correct behaviour, when setting a background image on a Div using a looper. There’s no custom CSS - this is ‘out of the box’.

Thank you.

#7

Hi Bill,

I will surely check with our development team and @charlie with this.

Thanks

#8

With the changes to background images accepting breakpoint you’ll have to use when using a looper. Has to do with how css is created by cornerstone and how loopers work. Sorry, we’ll take a look at getting around this issue, but it might get done quickly. Have a great day.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.