CSS selector image not displaying in website banner or in Chrome’s Dev Tools

  • Resolved kimberlym1

    (@kimberlym1)


    5 years, 9 months ago

    I am developing a website with a large banner that displays differently on each page. The background image is not displaying when I put the background image on the page selector but it will work on the main banner CSS code.

    This is for my wordpress site (WordPress 5.2) running a completely custom theme developed from scratch by me. Running PHP version: 7.0.33.

    This is the basics of the CSS I am writing. I have it set right now just to display a background colour (my goal is to be able to display an image):
    .page-id-15 .bannerImage { background: #35CC4B!important; }

    I have also tried (incase):
    .postid-15 .bannerImage { background: #35CC4B!important; }

    I have confirmed the correct page/post id of 15 (I know it is a page).

    I have put the background image/color into .bannerImage and it displays as expected, I just don’t want the same colour/image on each page of my site.

    Not sure what else to try. This should be easy.

    Here is my code:
    /// This will display background image and/or color ///

    .bannerImage {
    /* Set a specific height */
    height: 337px;

    /* Position and center the image to scale nicely on all screens */
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

    /// This will not display background image and/or color (showing color style) ///

    .page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }
/// HTML Code ///

<div class="bannerImage">
   <h2>Contact Us</h2>
</div>

    /// Word Press Admin URL to show correct page/post number ///

    /~naiedmon/wp-admin/post.php?post=15&action=edit
    /// URL ///

    I expect to see a banner that is 337px high with a width of 100% that is different on each page. What I actually see is a blank white banner space with the H2 displaying. Chrome only outputs the .bannerImage selector and not the .page-id-15 .bannerImage or .postid-15 .bannerImage selector.

    Below I have added the code I am seeing when I look at Chrome Developer Tools. Unlike the suggestions I completely agree with should work (I have tried), my selector tag of .page-id-15 .bannerImage {} is not be read by the browser and displayed. I did also attempt .postid-15 .bannerImage {}. This is where it has me stumped.

    Screen Capture of Code from Chrome Developer Tools

    The page I need help with: [log in to see the link]

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

  • That page seems fine to me: https://i.imgur.com/5E3PS0Q.png

    This one seems to be page ID 394. Which URL is page ID 15?

    Oops, I found it. Forgot I had changed the page I was looking at. Anyway, it looks fine too: https://i.imgur.com/7iXTUoD.png

    • This reply was modified 5 years, 9 months ago by MarkRH.

    The main problem is that you’re not calling the body_class() function in your theme. Once you do that, the right body classes (like page-id-15, etc) will be associated with the body element. Right now, your body element looks like:
    <body class="topgradient">

    If you change your site to another WordPress theme, and then inspect the body element, you’ll see what it’s supposed to look like.

    Thread Starter kimberlym1

    (@kimberlym1)

    Thank you!

    I knew it was going to be something obvious! I did have the function in there but have no idea why I also called class=”body” and apparently I kept overlooking that I did so.

    Thank you for looking at this with fresh eyes for me!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS selector image not displaying in website banner or in Chrome’s Dev Tools’ is closed to new replies.