Background image for specific pages?

Hi there,

You can set a featured image on individual posts and pages. The featured image will then display in place of the site’s default header for the post/page it’s been set on.

To a featured image: Navigate to the editor for a post/page and then look for the Featured Image module to the right of the editor. If you can’t see that module, select the Screen Options tab in the upper right hand corner and check the box next to Featured Image to activate the module.

To set a completely different background image (rather than a header image) for a page then some custom CSS would be needed.

If you can share a link to your site and walk me through the specific parts that you’re trying to change, I’ll be happy to help with the specific CSS you’d need.

Thanks!

Hi Siobhan,

I’m helping a friend build the page and currently have a hold page displayed until it’s ready. Is there a way I can show you without removing that? I’d like a completely separate background image for each page if possible. The feature image has a “read more” button I don’t particularly like and even when I try and hide it, I’m not successful.

Hello!

I figured this out using CSS. So I will close it, but want to post for knowledge share.

Just insert whatever your page id into code below and specify your image URL and you should be good to go.

body.page-id-# {
	background: url('https://www.backgroundimage.com');
}

I’m glad you were able to figure out a solution! Thank you so much for sharing it here, too.

@megan.bares How do you exactly add the page ID – Page name or full page link?
I am currently playing with the name and the link to a link which is uploaded to my media. AFAIK the link should be entered as
background: url(/wp-content/uploads/photo-1471116260918-e7a900488f12-1.jpg);
and there shouldn’t be a ‘ ‘ around the link?

• This reply was modified 8 years, 3 months ago by Stoyan.

Hi,

I got this to work also. Thank you @megan

@stoyan

I added the page id like this:

body.page-id-31 {
	background: url(url to the image)
}

With no ” around the link. But both ways work.

Page ID i found in the admin panel -> Pages -> select a page -> and then permanent link gives the ID.

If you want the image to be full size. I solved it like this:

body.page-id-31 {
	background: url(url to the image)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Hope it help some one.

• This reply was modified 7 years, 10 months ago by jrod236. Reason: typo

Hmm, I still dont understand the page ID part. for example if my permalink is https://www.somthing.com/register, & I am trying to set the background for this register page, would my CSS look like this ?:

body.page-id-register {
	background: url(url to the image)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Hmm, I still dont understand the page ID part. for example if my permalink is https://www.somthing.com/register, & I am trying to set the background for this register page, would my CSS look like this ?:

body.page-id-register {
	background: url(url to the image)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

@chromechris, the page ID is a number that can be found in your page view while editing. Go to the page you’re working on and click edit. Look in the URL and there should be a number, which is the page ID.