Support » Developing with WordPress » CSS background images inside PHP plugin file

  • Resolved pfbarnet

    (@pfbarnet)


    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)
  • 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");

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

    • This reply was modified 1 month, 3 weeks ago by  pfbarnet.

    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.

    Thank you this is extremely helpful!

    Resolved.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.