How to make a specific page have a transparent background

  • Resolved AlanPecan

    (@alanpecan)


    9 years, 6 months ago

    Hi,

    I have the following code in my css and it is making all of the pages background transparent. It is cool to see but I would really like it on 1 specific page to happen on. What can I change to make it only work on a page called ‘Home’.

    Site: https://thenuthousewoodworks.com

    Theme used: Twenty Fourteen

    CSS Coding

    .site, .entry-header, .entry-title, .entry-content {
    background-color: transparent !important;
    }

    Sincerely,

    AlanPecan

Viewing 2 replies - 1 through 2 (of 2 total)

  • Look at the classes on the <body> tag, and you’ll see one that’s like post-id-123 or page-id-123. That will be the identifier for that page, so add that right at the front of the CSS rule. So, if the page ID is 123, it would be like this:

    .page-id-123 .site, .entry-header, .entry-title, .entry-content {
    background-color: transparent !important;
}
    Thread Starter AlanPecan

    (@alanpecan)

    Thanks that worked… I did not realize to put the .page in front of the .site to make it work on that specific page.

    Cat you are awesome just like your tag says…

    Have a great day.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make a specific page have a transparent background’ is closed to new replies.