XF 2.2 Widget background image

DaveL

Well-known member
Afternoon,
Looking to add an image in the background of my widget. Im using this code:

Code:
[data-widget-key="mywidget"] .block-container {
        color: #816a07 !important;
        background: #FFD700 !important;
}

Can anyone advise what I would need to adjust to display an image from a HTML link please?
 
Last edited:
If you change the native ratio then it's going to look odd.

You can use background-size, background-position, and background-repeat .

If you use the browser console, you can play around with those in real time and Chrome will also provide the option values, like so:

1673717136217.png
 
Like this:

Less:
[data-widget-key="mywidget"]
.block-container
{
    color: #816a07 !important;
    background-image: url('../path/to/image.png');
    background-size: cover;
}

This may help:


 
Top Bottom