Background image on front page only

Hi there! Can you share a link to your site so I can check out your front page and see what we can do? (Are you using the Full Width template? Or posts on the front page?)

It is a pub/restaurant site, there are no posts, no blogs and the site is at https://www.theshoulderko.com/
Please note that is very much work in progress as I try to work with the landlady of the pub to produce a workable site. We do not want any blogs or interaction apart from a booking form.

Jonathan

No worries! We see lots of works in progress around here. ??

Make sure you have the Custom CSS module activated in Jetpack, then go to Appearance > Edit CSS and add the following:

.site {
	background-image: url("IMAGE URL HERE");
}

Paste your image URL inside the ( ) and save.

When I tested this on your site using Firebug it filled the background with an image everywhere except the thin title bar across the top and the black footer space at the bottom.

Depending on your image, there are some more properties you may want to add (like repeat and position) found on this page: https://www.w3schools.com/css/css_background.asp

How’s that? Let me know if you have any questions! ??

Sarah

That works, but not quite as I wanted. I wanted a background image ONLY on the home page, not all of them.

Would I change the .site to something else?

Ah, sorry, forgot about that part by the time I came to write the reply. ??

Try swapping .site to .home

How’s that?

Sarah

Spot on, thankyou. One last question, and I should know the answer, does the URL for the image have to be the full https://… if the image is in the WP library?

Great! ??

You should be able to start it from /wp-content and still see the image working.

Thankyou for all your help.
Jonathan

You’re welcome!