Image in the footer widget area

[Yvonne]

How to insert a background image (with transparency) across the entire width of the widget’s footer area.

{background:url(https://pogon24.info/wp-content/uploads/2026/07/grafika.png);background-size:contain;}

inserted into: Main Options –> Footer –> Footer Area Widget –> Footer Area Widget BG –> CSS
doesn’t work

 

[User]

@sariwo

As I understand it, you can insert a background image with transparency across the entire footer widget via Appearance > Customize > Footer > Footer Widgets and setting a background image there, then using the Background Opacity slider to adjust transparency.

Or is that not working for you?

[Yvonne]

Nie mam takich opcji; nie mogę wstawić obrazu ani dostosować jego przezroczystości

[Yvonne]

https://pogon24.info/images/stopka.png

https://pogon24.info/images/stopka2.png

[scrambler]

If I put your background image CSS using the customizer in where mode in:

Customizing ▸ Custom CSS > Footer Area >Footer Area Widget Area Custom CSS

It works if the URL is one of my images

BUT

If I try to use the URL to your image it does not, and I can’t see why.

Have you tried a different image?

 

[Yvonne]

Nothing works with any graphics or anywhere; maybe the command is incorrect, but I used this one:

.footer-widgets {
background-image: url(“https://pogon24.info/wp-content/uploads/2026/07/grafikakibicowska1.png”);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

or

 

.footer-widget-area {
background-image: url(“https://pogon24.info/wp-content/uploads/2026/07/grafikakibicowska1.png”);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

[Yvonne]

@scrambler

I’m wondering which version of Weaver Xtreme you have, since you’re mentioning a path that isn’t there on my end 
Dostosowanie ▸ Niestandardowy CSS >  Obszar stopki > Obszar widżetu Obszar stopki (Niestandardowy CSS)

[scrambler]

The path of the customizer is with the customizer set in the “where” mode. Version would not make a difference

• Options Level: Full  Interface: Where

If using the Legacy admin, it is in Appearance > Weaver Xtreme Admin > Main options > Footer > Footer Widget Area > Footer Widget area BG CSS+ box

If instead of using the Theme Custom CSS box you want to use Full custom CSS rule placed in the Theme Global Custom CSS Box, then the rule would be

#footer-widget-area {
background-image: url(https://pogon24.info/wp-content/uploads/2026/07/grafikakibicowska1.png&#8221);
background-size: contain;
}

But again it works with my image , but not yours

DO NOT Mix the two type of rules (footer widget area CSS and them global CSS)

Post a link to your site with the rule in place telling me where you put it

 

[scrambler]

This reply has been accepted as the best answer.

try with this public URL  using the rule below in the footer widget area CSS+ box

{background:url(https://www.aaronreedphotography.com/images/xl/The-Wash-Web-2019.jpg);background-size:contain;}

OR with the rule below in the theme Global Custom CSS

#footer-widget-area  {background:url(https://www.aaronreedphotography.com/images/xl/The-Wash-Web-2019.jpg);background-size:contain;}

And if that does not work, post the link to your site , letting me know in which CSS box you placed which rule

[Yvonne]

Thanks, that code worked for me, but it didn’t work for you because some unnecessary characters snuck into your image file (&#8221)

[scrambler]

It does not work for me even without these as in your original post.

But if it finally works for you, then all is good 🙂

[Author]

Posts