Homepage Background Image

Support
#1

I’m having trouble getting a background image to appear? Just on the home page: http://activateworship.org/

#2

Hello @tcpstudio,

Thanks for asking. :slight_smile:

To display background image only on home page please add following CSS:

.home .x-root {background-image: url(http://activateworship.org/wp-content/uploads/2017/10/WEB-LANDING-900x600.png);}

I used an image from your website as a sample in the code. Please replace the URL with the image URL.

Please note that in above code I have used a selector i.e .home and CSS codes implemented using this selector will work only on home page. Other thing to note is background-image property. This property will let you to show background image. If you would like to learn more, I am sharing few links that you can refer:

https://www.w3schools.com/cssref/pr_background-image.asp

Thanks.

#3

Awesome!!! thank you so very much!!

One last thing, I can’t figure out how to get the image “Download our App” to stay below the “coming soon” block (which is apart of the background image) I tried adding gaps to the section on the homepage, but nothing will keep it down there and not end up with a scroll. Thanks for you help!

http://activateworship.org/

#4

Hi there,

It would be tricky to do that because everything on the page except the Download our App button is set to be in the background image of the page.

What I can suggest is to remove the white areas such as the logo, activate advent, and coming soon to the background image and place them as image element stack above each other on the page.

That way, you will be able to make sure that they will be placed accordingly on the page.