Fixed global ids and classes in footer template

hello dear support team,

I have been working with the newspaper theme in WordPress for some time now.

I have a footer and would like to display an image in it. So far this works quite well.

Now I would like to address the container directly with the corresponding class. This also works on the homepage. However, the content is generated so dynamically that the ID of the container changes on every subpage.

The consecutive container numbers are as follows:
tdi_139
….
tdi_143 etc..

I have already tried to assign a fixed ID to the container to which I add the background image in the TagDiv Editor. However, within this container, further containers with consecutive IDs are created, which in turn are different on each subpage.

My question:
Is there a way to define a background image for a container and assign a corresponding class directly for the image to prevent the classes from being stubbornly consecutive?

Edit:

For better understanding ill post this code:

this is what my rendered site looks like in the footer:

<div class="td-footer-template-wrap" style="position: relative">
<div class="td-footer-wrap ">
<div id="tdi_137" class="tdc-zone"><div class="tdc_zone tdi_138 wpb_row td-pb-row" >
<style scoped>.tdi_138{min-height:0}</style><div id="tdi_139" class="tdc-row"><div class="vc_row tdi_140 wpb_row td-pb-row" >
<style scoped>.tdi_140,.tdi_140 .tdc-columns{min-height:0}.tdi_140,.tdi_140 .tdc-columns{display:block}.tdi_140 .tdc-columns{width:100%}</style><div class="vc_column tdi_142 wpb_column vc_column_container tdc-column td-pb-span12">
<style scoped>.tdi_142{vertical-align:baseline}.tdi_142>.wpb_wrapper,.tdi_142>.wpb_wrapper>.tdc-elements{display:block}.tdi_142>.wpb_wrapper>.tdc-elements{width:100%}.tdi_142>.wpb_wrapper>.vc_row_inner{width:auto}.tdi_142>.wpb_wrapper{width:auto;height:auto}</style><div class="wpb_wrapper" ></div></div></div></div><div id="tdi_143" class="tdc-row"><div class="vc_row tdi_144 wpb_row td-pb-row" >
<style scoped>.tdi_144,.tdi_144 .tdc-columns{min-height:0}.tdi_144,.tdi_144 .tdc-columns{display:block}.tdi_144 .tdc-columns{width:100%}</style><div class="vc_column tdi_146 wpb_column vc_column_container tdc-column td-pb-span12">
<style scoped>.tdi_146{vertical-align:baseline}.tdi_146>.wpb_wrapper,.tdi_146>.wpb_wrapper>.tdc-elements{display:block}.tdi_146>.wpb_wrapper>.tdc-elements{width:100%}.tdi_146>.wpb_wrapper>.vc_row_inner{width:auto}.tdi_146>.wpb_wrapper{width:auto;height:auto}</style><div class="wpb_wrapper" ></div></div></div></div><div id="tdi_147" class="tdc-row stretch_row"><div id="footer-jonas-id" class="vc_row tdi_148 footer-jonas-class wpb_row td-pb-row tdc-element-style" >
<style scoped>.tdi_148,.tdi_148 .tdc-columns{min-height:0}.tdi_148,.tdi_148 .tdc-columns{display:block}.tdi_148 .tdc-columns{width:100%}.tdi_148{padding-top:54px!important;padding-bottom:20px!important;position:relative}.tdi_148 .td_block_wrap{text-align:left}@media (max-width:767px){.tdi_148{padding-top:40px!important}}@media (min-width:768px) and (max-width:1018px){.tdi_148{padding-top:44px!important}}</style>
<div class="tdi_147_rand_style td-element-style" ><div class="td-element-style-before"><style>.tdi_147_rand_style>.td-element-style-before{content:''!important;width:100%!important;height:100%!important;position:absolute!important;top:0!important;left:0!important;display:block!important;z-index:0!important;background-image:url("https://entwicklung.nahe-news.de/wp-content/uploads/2023/12/Felsenkirche.webp")!important;background-position:center center!important;opacity:0.4!important;background-size:cover!important}</style></div><style>.tdi_147_rand_style{background-color:#111111!important}.tdi_147_rand_style::after{content:''!important;width:100%!important;height:100%!important;position:absolute!important;top:0!important;left:0!important;z-index:0!important;display:block!important;background:rgba(0,0,0,0.36)!important}</style></div><div class="vc_column tdi_150 wpb_column vc_column_container tdc-column td-pb-span12">
<style scoped>.tdi_150{vertical-align:baseline}.tdi_150>.wpb_wrapper,.tdi_150>.wpb_wrapper>.tdc-elements{display:block}.tdi_150>.wpb_wrapper>.tdc-elements{width:100%}.tdi_150>.wpb_wrapper>.vc_row_inner{width:auto}.tdi_150>.wpb_wrapper{width:auto;height:auto}</style><div class="wpb_wrapper" ><div class="vc_row_inner tdi_152 vc_row vc_inner wpb_row td-pb-row" >
<style scoped>.tdi_152{position:relative!important;top:0;transform:none;-webkit-transform:none}.tdi_152,.tdi_152 .tdc-inner-columns{display:block}.tdi_152 .tdc-inner-columns{width:100%}</style><div class="vc_column_inner tdi_154 wpb_column vc_column_container tdc-inner-column td-pb-span4">
<style scoped>.tdi_154{vertical-align:baseline}.tdi_154 .vc_column-inner>.wpb_wrapper,.tdi_154 .vc_column-inner>.wpb_wrapper .tdc-elements{display:block}.tdi_154 .vc_column-inner>.wpb_wrapper .tdc-elements{width:100%}</style><div class="vc_column-inner"><div class="wpb_wrapper" ><div class="wpb_wrapper wpb_text_column td_block_wrap td_block_wrap vc_column_text tdi_155 tagdiv-type td-pb-border-top td_block_template_1" data-td-block-uid="tdi_155" >
<style>.td-theme-wrap .tdi_155 .td-pulldown-filter-link:hover,.td-theme-wrap .tdi_155 .td-subcat-item a:hover,.td-theme-wrap .tdi_155 .td-subcat-item .td-cur-simple-item{color:#ff0000}.td-theme-wrap .tdi_155 .block-title>*,.td-theme-wrap .tdi_155 .td-subcat-dropdown:hover .td-subcat-more{background-color:#ff0000}.td-theme-wrap .td-footer-wrapper .tdi_155 .block-title>*{padding:6px 7px 5px;line-height:1}.td-theme-wrap .tdi_155 .block-title{border-color:#ff0000}.td-theme-wrap .tdi_155 .td_module_wrap:hover .entry-title a,.td-theme-wrap .tdi_155 .td_quote_on_blocks,.td-theme-wrap .tdi_155 .td-opacity-cat .td-post-category:hover,.td-theme-wrap .tdi_155 .td-opacity-read .td-read-more a:hover,.td-theme-wrap .tdi_155 .td-opacity-author .td-post-author-name a:hover,.td-theme-wrap .tdi_155 .td-instagram-user a{color:#ff0000}.td-theme-wrap .tdi_155 .td-next-prev-wrap a:hover,.td-theme-wrap .tdi_155 .td-load-more-wrap a:hover{background-color:#ff0000;border-color:#ff0000}.td-theme-wrap .tdi_155 .td-read-more a,.td-theme-wrap .tdi_155 .td-weather-information:before,.td-theme-wrap .tdi_155 .td-weather-week:before,.td-theme-wrap .tdi_155 .td-exchange-header:before,.td-theme-wrap .td-footer-wrapper .tdi_155 .td-post-category,.td-theme-wrap .tdi_155 .td-post-category:hover{background-color:#ff0000}</style>
<style>.tdi_155,.tdi_155 p{text-transform:capitalize!important}.tdi_155 h1{text-transform:capitalize!important}.tdi_155 h2{text-transform:capitalize!important}.tdi_155 h3{text-transform:capitalize!important}</style><div class="td-block-title-wrap"><h4 class="block-title td-block-title"><span class="td-pulldown-size">APOTHEKEN-NOTDIENST</span></h4></div><div class="td-fix-index">

as you can see, i added a class and an id to my container:
.footer-jonas-class
#footer-jonas-id

I tried everything but i cant change the background image:
Felsenkirche.webp via CSS, as the other containers are generated randomly:

I can use the following classes, but that will only affect the homepage, as the ids would be different on other subsites.

.tdi_143_rand_style > .td-element-style-before {
background-image: url(NEWIMAGE.JPG)!important;
}

as i said, i can not do this. It is not possible to access this container in the tagdiv builder. I dont have any options to set this class. I also tried to use the standard text editor but there is also no option for that.

Is there any way to have a better overview over all containers? So that i can edit them even if i cant click them in the tagdiv editor?

Hello,
Thank you for your reply. But either my English is bad or we are talking at cross purposes.

I have already understood how to assign classes and IDs. The problem is that I can’t even get to this setting. I can make this setting for numerous containers. but unfortunately not in the automatically generated one in which the background image is packed.

I can edit the container to which I have assigned the background image and also assign an ID to it. Unfortunately, this is not the container that is rendered in the frontend. The container in the frontend with the background image always gets an ID automatically and unfortunately I cannot assign it as you described.

Is there a way to display a list of all containers in the TagDiv editor?

okay, and how do I access the container so that I can assign the ID? The containers are so nested that I can’t click on them.