XF 2.2 Widget background image

[DaveL]

Afternoon,
Looking to add an image in the background of my widget. Im using this 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?

 

[Paul B]

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

 

[DaveL]

Thank you @Brogan , that worked a treat!
One final question, I want to try and scale it to fit, what's the best way of adding the height and width in with that? I've tried a few different variations but no joy.

 

[Paul B]

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:

 

[DaveL]

Thanks @Brogan

For background-size, would it then look something like:

background-image: url('../path/to/image.png' width="80%" height="80%");

 

[Paul B]

Like this:

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

This may help:

CSS background-image property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com