Body Background for Home Page

[Shane]

I want to have a background image only on the home page behind my content. I have tried the following custom css but it doesn’t work.

body .page-id-7 {
background-image:url(“http://act1.randallreilly.com/wp-content/uploads/sites/2/2016/02/large-road-home-background.png”!important;)
}

[Anonymous]

Hi @allisonnance, Please provide me the homepage url so I can provide you exact css to set background on home page.

Regards

[Shane]

act1.randallreilly.com

Right now, I just have it as a background in a page builder row but it doesn’t align properly. I would prefer it to be a background image on the page.

Also, what is the optimal size for a page background image?

[Anonymous]

Hi @allisonnance, You have set the boxed layout so the background image will be applied only on boxed width:

 .boxed .page-full-width {
    background: url('http://act1.randallreilly.com/wp-content/uploads/sites/2/2016/02/road-image.png') !important;
}

Regards

[Shane]

This applies the background to all the pages. I just want it on the homepage. I tried adding the page id but that didn’t work.

[Anonymous]

Hi @allisonnance, The css below will implement the background image behind your content but only in homepage. Just add following css in your child theme.

.home-page .page-full-width {
  background: url('http://act1.randallreilly.com/wp-content/uploads/sites/2/2016/02/road-image.png') !important;
}

Regards