CSS background images inside PHP plugin file

  • Resolved pfbarnet

    (@pfbarnet)


    7 years ago

    I’m trying to use CSS background-image url(”) link in my WordPress plugin php file. None of the images are showing and I’m not sure how to make it work. It’s for a client so I need the images to be able to be installed along with the plugin, not manually placed anywhere in the theme folder.

    I’ve tried putting images in the theme folder but it still doesn’t work. I’ve tried linking to the url by storing it in a variable ($url).

    php:
    $url1 = ‘image.png’;

    css: (in same php document)
    .ch-img-2 {
    background: white url(‘<?php echo $url2 ?>’) no-repeat;
    background-size: contain;
    background-position: center;
    }

    also tried:

    .ch-img-1 {
    background: white url(‘<?php image.png ?>’) no-repeat;
    background-size: contain;
    background-position: center;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • catacaustic

    (@catacaustic)

    7 years ago

    Images in CSS files need to have the correct path set on them. If you have it set up like this:

    background-image: url("image.jpg");

    Then the image has to be in the same directory as the CSS file. If it’s outside of there, you will need to use either a relative or full path.

    background-image: url("../../images/image.jpg");

    or…

    background-image: url("http://mysite.com/folder/structure/image.jpg");

    Thread Starter pfbarnet

    (@pfbarnet)

    7 years ago

    Okay, and this applies to CSS from within a PHP file as well? There are no special considerations?

    • This reply was modified 7 years ago by pfbarnet.
    Joy

    (@joyously)

    7 years ago

    URLs in CSS files are relative to the CSS file and not the page URL.
    But URLs in CSS that is inline (like in a <style> tag or even a style attribute are relative to the page URL.
    So your plugin should put the CSS in a file and put the images relative to that, and then enqueue the style file only on pages where it is needed. If you don’t, you’ll have to generate the absolute URL and put it in the CSS that is inline.

    Thread Starter pfbarnet

    (@pfbarnet)

    7 years ago

    Thank you this is extremely helpful!

    Thread Starter pfbarnet

    (@pfbarnet)

    7 years ago

    Resolved.

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

The topic ‘CSS background images inside PHP plugin file’ is closed to new replies.