CSS Background Image & .post-id-number class?

  • Resolved earthsprite

    (@earthsprite)


    9 years, 9 months ago

    I ran into a weird problem and I’m wondering if there’s just some rule I don’t know about CSS or WordPress. I wanted to make a single page a different background image, all fine and good, found a CSS shortcut from the forums.

    I tried

    body.page-id-101 {
background: url('absolute path to image in childtheme img dir');
}

    Nothing. Checked w/Inspect Element in Chrome to make sure nothing was overriding…tried a few things such as

    • !important
    • relative path instead of absolute
    • a different image altogether
    • CHMOD the image (but it was at 604 like every other image in the folder)

    but the only way to make it work was to put the image in the wp root folder, alongside the .htaccess etc. I have no idea why this would be since images in the same child theme directory are correctly called by the body general and a separate page using the .page-template-custom-php class — my only guess is that the .page-id-number class is something too specific to call back to the URL of the image?

    EDIT: Forgot to say, this image loads properly on direct access

    For now I can use the wp root for the background image but I would really prefer to know why this class wasn’t working with images. I should also mention it works fine for background colors and gradients; it only doesn’t work with a URL image in that directory for the child theme.

    Another alternative is to make another custom template for this page, but I haven’t needed to with such specific CSS. Still. Why would this happen?

    EDIT AGAIN: I just tried the .page-template-custom-php class and no dice. I am clearly going insane because this worked for a different page with another image.

    Any ideas?

    Thanks.

    P.S. Current theme is CyberChimps’ Responsive, but I’m not sure if this is truly tied to the theme and not a WordPress issue since post-id class seems universal?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Are you able to post a link?

    Sorry, on break trying to think about it and rushing is never a good combo.

    One way would be using the template hierarchy page-{id}.php to create it just for that single page….

    Thread Starter earthsprite

    (@earthsprite)

    Sorry for my slow response.

    I could post a link but I’d have to make it public (currently private since we don’t want it live on the client’s site yet).

    You’re saying I could make a template for that single page? I suppose I could, it’s just confusing to have a background work on one page and not another.

    I’ll work a bit today and get back to you, thanks!

    EDIT: Just tried using the image from the OTHER page into this one. That image (png) works. The correct image and test image are both jpgs and don’t show up. About to test another png. — NOPE, doesn’t work either. I’m really wondering if this is a permissions issue or callback problem? I uploaded these via Filezilla, but maybe I should try the WordPress uploader.

    Yeah, it works in the upload folder just like it works in the wp root directory. I really don’t understand this problem but I guess I’ll just have to deal with it :/.

    Thread Starter earthsprite

    (@earthsprite)

    Just a note, I tested the image in the child theme directory (outside of img dir) and it works fine. Current CHMOD for img dir is 705. Is this correct?

    Thread Starter earthsprite

    (@earthsprite)

    Okay, I got a web dev friend to help out and picked his brain. The simplest solution is to change the name to something not hyphenated or whatever combo I had there (“AD-bg”). I don’t know why. He doesn’t know why. My .htaccess seemed normal. Really confusing.

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    very odd but at least you got it working!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Background Image & .post-id-number class?’ is closed to new replies.