with Salient I have configured my footer to display in 2 columns.
Left column has white background with text (editable under Appearance -> Widgets -> Footer Area 1 and this fine)
Right Column we will like a picture as background, currently has text and this can be edited under "Appearance -> Widgets -> Footer Area 2" pretty sure that we need some custom CSS to add the image and give it a light overlay if possible.. how do I identify the entry for the CSS to point at the "Footer Area 2" - Can you point me to the "SOMETHING HERE" , sure I'm not too far away on sorting this, thank you.
body #footer-SOMETHINGHERE:
{
background: url(http://www.myurl.com/myphotohere.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Can you try and add a background image to that second column in the footer. We are assuming its the one that has the text hours, dinner, gift vouchers, policies.
And if that is not what you want then you can use this CSS to specifically target that column:
That did work, however, it looks a little small, was hoping the image will cover the entire half column (full width/height) - tried auto / cover and contained but didn't change, is there an option to cover the entire column in full ?
Could you instead use a nectar slider element on the right column. It will fill up the column area better. Enable the flexible slider height and then set a minimum slider height.
Hi team,
with Salient I have configured my footer to display in 2 columns.
Left column has white background with text (editable under Appearance -> Widgets -> Footer Area 1 and this fine)
Right Column we will like a picture as background, currently has text and this can be edited under "Appearance -> Widgets -> Footer Area 2" pretty sure that we need some custom CSS to add the image and give it a light overlay if possible.. how do I identify the entry for the CSS to point at the "Footer Area 2" - Can you point me to the "SOMETHING HERE" , sure I'm not too far away on sorting this, thank you.
body #footer-SOMETHINGHERE: { background: url(http://www.myurl.com/myphotohere.jpg); background-size: cover; background-repeat: no-repeat; }Hello There,
Thanks for keeping in touch.
Please send in your website url so that we may check this out.
Thanks.
Hi there,
Can you try and add a background image to that second column in the footer.
We are assuming its the one that has the text hours, dinner, gift vouchers, policies.
And if that is not what you want then you can use this CSS to specifically target that column:
#footer-widgets div.row:first-of-type div.col.span_6:nth-child(2){ background: url("http://www.myurl.com/myphotohere.jpg"); background-size: cover; background-repeat: no-repeat; }Cheers.
Thank you.
That did work, however, it looks a little small, was hoping the image will cover the entire half column (full width/height) - tried auto / cover and contained but didn't change, is there an option to cover the entire column in full ?
Attached files: Screen Shot 2022-06-22 at 10.35.58 PM.png
Hi there,
Could you instead use a nectar slider element on the right column. It will fill up the column area better. Enable the flexible slider height and then set a minimum slider height.
Try that.