Enterprise Pro – Footer Widget – Change light grey background colour to an image

[Cheshire]

Hello

Is it possible to change the light grey background colour on the 3 Column Footer Widget to a picture?
http://completefinsol.com.au/
If yes - how ? 🙂

Or would it be better to create another full width widget area under those 3 column footer widgets and just use Jetpack to insert an image into that widget area?

Thanks
Jayne

http://completefinsol.com.au/

[lawriebea]

Have you tried a background image? For example try this in your child 's style.css file:
.site-inner {
background-image: url(http://www.vivikstyle.com/wp-content/uploads/2015/12/test-zim-landscape-top.jpg);
}

[Victor Font]

Apart from the home page, site-inner is the container for all of your content post/page content. If you add a background image to site-inner, it will be visible on all of your pages, not just the home page. To add an image to display only on the home page, create a new CSS block for .home.site-inner, then add the code for the background image.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Cheshire]

Hello Lawriebea and Victor - thank you for your replies 🙂

No, definitely don't want it on every page (which also now explains why I couldn't pick it up exactly with Firebug)

I have put

.home.site-inner {
background-image: url(http://completefinsol.com.au/wp-content/uploads/2016/03/Complete-Financial-Solutions-Homepage-Footer.jpg);
}

into the Jetpack CSS Customiser, but nothing is showing....is there more I need to include for the CSS Block?

It is quite a large picture in height, so will also want the link widgets of the footer area at the top of the image (not in the middle)

Thank you so much for helping

Jayne

[lawriebea]

Hi again
Using Firefox's Inspect Element tool I got the image to appear behind the 3 boxes (i.e. Our Team, Our Services, Newsletter) but because the image is overly high as you say, only the top black part of the image is visible. The section holding the 3 boxes just ain't high enough. I am not sure exactly what you mean by :

so will also want the link widgets of the footer area at the top of the image (not in the middle)

I usually make css customizations directly into style.css. I have never used Jetpack so sorry cannot comment on that.

[Cheshire]

Hi Lawrie

Thank you so much for your response

How did you get the image to show only on the Home Page - what was the CSS you used?

I figured once I got it to show at least I could start playing around with heights and paddings etc.

I'm just wondering if it will be easier to create a new widget area under the footer and put the image in there........mirror the Home Top Widget under the 3 Column Footer Widget

Personally I think the image is just going to look out of place and not in style with their branding and dead space and have been trying to convince him not to have it......but he is adamant.

[Cheshire]

Hi

Is anyone able to help with CSS for the grey strip on the home page behind the footer widgets....I believe I need to set a .home.site-inner rule - but not sure what the parameters are

I haven't quite got this sorted

Thank you 🙂

Jayne

[Cheshire]

Hi

I am willing to pay someone via Paypal to get this CSS code written (and a few other tweaks with it) as I need to get it sorted

Please contact me at [email protected] if you can help

Thanks
Jayne

[Author]

Posts