Why is this CSS not working for bg image?

[demonboy]

Hi,

I have a page called ‘Blog Posts By Year’, which is published here:

https://followtheboat.com/blog-posts-by-year/

I am trying to add a background image using the page id number but it is not calling it up.

.page-id-40002 {
background-image: url("https://followtheboat.com/wp-content/uploads/2015/08/sailboat-thailand-tropical-holiday-esper.jpg");

I’ve checked that the page ID is correct and I’ve actually used this same image on the blog page (which used the element .blog. site) so I know the image works but when I inspect this page the CSS is missing. It is using the default template and I’m trying to get the image and the page title to look the same as https://followtheboat.com/blog.

I know this is a simple issue, any pointers?

Also note how the sidebar has been pushed to the bottom. I’d like to remove the sidebar altogether.

[jade]

Hi @demonboy,

You actually do not need to add a custom CSS to add an image background to a page.

You can edit the page and go to the Page Settings and you should be able to set the Background Image:

If you want to do it by custom CSS, please update your code to:

.page-id-40002 .site {
    background-image: url("https://followtheboat.com/wp-content/uploads/2015/08/sailboat-thailand-tropical-holiday-esper.jpg");
}

Also note how the sidebar has been pushed to the bottom. I’d like to remove the sidebar altogether.

You may set the page template to Layout - Fullwidth.

Hope this helps.

[demonboy]

Thanks for getting back to me. I’m nnot sure the background image feature on the page will work as it’s set to a specific design but the code helps. I omitted the .site part.

Cheers!

[rubin]

You’re welcome!