Background Image

[Graeme O’Hara]

Hi Bill,

I have one last question about the Theme if you don’t mind.

I added a background image to the site that will sit behind the blog. As I understand it, that means the image sits hidden behind every page on the site. I’ve noticed that in instances when the site takes an extra second or two to load up, the background image can be briefly seen before being covered over.

My question is, do you know of a way I can restrict the background image to only pages that I select (such as the blog) so that this doesn’t happen?

Many thanks yet again for your help!

Graeme

[Bill Robbins]

Graeme,

It is possible to keep the image from showing on some pages. Say you want to hide it on the home page. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   body.home {
   	background-image: none;
   }
   

3. Update your settings.

That should leave it visible on posts, your blog and other pages, but hide it on the home page. If you run into trouble, let me know.

Thanks,
Bill

[Graeme O’Hara]

Thanks Bill,

That stopped the background image appearing before the site loads – great – although it does still flash up for an instant between pages sometimes, especially on a mobile device (iPhone).

The site is still at the same location as I sent you before if you’re interested to see. It’s by no means a major issue but it does catch my eye so if there was any chance of getting rid of it I’d appreciate it.

Thanks,

Graeme

[Bill Robbins]

Good Morning Graeme,

We could approach this from the other direction. Instead of trying to hide the background image in some situations we could just specify the only spots we want it visible. Take the background out of the background section of the theme options page and add this to your Custom CSS:

body {
	background-color: #f9f9f7;
}

body.single-post,
body.blog { 
	background-image: url(https://go.bobstrainset.co.uk/wp-content/uploads/2015/05/BlogBackground-e1431436451716.jpg); 
	background-position: center top;
}

See how that works out for you now.

Take care,
Bill

[Graeme O’Hara]

Ideal as ever Bill, that worked perfectly!

I have a Contact page as well with an email template on it that I’d like to do the same with (you reach it on the site by clicking the link on the Contact home block); I thought I’d be clever and try adding it into the code you sent but it didn’t work – could you come up with something similar for it?

Thanks so much again!

Graeme

[Bill Robbins]

Here’s what I would do for inside pages. Install a plugin called Style Buddy. It adds a new box to the page editor where you can add CSS to that page only. For pages other than the blog page where you want the background add this:

body { 
	background-image: url(https://go.bobstrainset.co.uk/wp-content/uploads/2015/05/BlogBackground-e1431436451716.jpg); 
	background-position: center top;
}

See how that goes,
Bill

[Graeme O’Hara]

Hi Bill,

I got the plugin without any trouble and added the code but it the picture didn’t appear I’m afraid. Just as a side note, I uploaded a resized version of the image, but I did change the url in the code to match.

Thank you!

Graeme

[Bill Robbins]

Graeme,

I took a look this morning. It looks like the contact page is actually a portfolio group instead of an actual WordPress page. Is that what you’re intending? If it is the way to change the background there would be to change the hero image. It will cover up the background image.

Let me know how it goes,
Bill

[Author]

Posts