What is the proper way to get background-image in php for css?

Question

I have the following function that I'm trying to use to get an image in the same directory as the plugin but inside the images folder.

function my_login_logo() { ?>
<style type="text/css">
    #login h1 a, .login h1 a {
        background-image: url(<?php echo dirname(__FILE__); ?>/images/logo3.png);
    height:65px;
    width:320px;
    background-size: 320px 65px;
    background-repeat: no-repeat;
        padding-bottom: 30px;
    }
</style>

its is taken from the following, which works fine. yes "/" works.

function my_login_logo() { ?>
<style type="text/css">
    #login h1 a, .login h1 a {
        background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
    height:65px;
    width:320px;
    background-size: 320px 65px;
    background-repeat: no-repeat;
        padding-bottom: 30px;
    }
</style>

What am I doing wrong?

what does the rendered css look like (right click -> view source)? — Jeff
– Jeff, Commented Oct 19, 2018 at 22:30
With dirname(__FILE__) you get the absolute path from the server's file system root (e.g. /var/www/html/images/logo3.png). To use it in CSS you need the relative path from the webserver's document root, which is a different path. For example, if the image is in /var/www/html/images/logo3.png and the webserver's document root is /var/www/html, you need to use /images/logo3.png in CSS. — rickdenhaan
– rickdenhaan, Commented Oct 19, 2018 at 22:36
I'm not sure if Wordpress has a function for it. If not, you can try one of the methods in the answers to this question — rickdenhaan
– rickdenhaan, Commented Oct 19, 2018 at 23:08

Nikko Khresna · Accepted Answer · 2018-10-20 06:24:01Z

0

Is this what you are looking for?

https://developer.wordpress.org/reference/functions/plugin_dir_path/

https://codex.wordpress.org/Function_Reference/plugins_url

Maybe next time also point out whats the result of the 'not working' one

Why its not working?

Dirname will return abs path, which if you try to access from browser will not resolve. The path you want is relative to wp root.

edited Oct 20, 2018 at 6:24

answered Oct 20, 2018 at 6:18

Nikko Khresna

1,0099 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

What is the proper way to get background-image in php for css?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related