CODEWITHSUNDEEP
phpwordpresswordpress-theming
Sumon Hasan
Sumon Hasan

Reputation: 310

How do I include background images url in a wordpress plugin?

enter image description here

This is my wordpress plugin code. How to dynamic background-image URL in a WordPress plugin?

<?php 
function active_qploader() {?>
    <style type="text/css"> 
        #preloader { 
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        overflow:visible;
        background-color:#333;
        background-image:url("images/test.png");
        background-repeat:no-repeat;
        background-attachment:center center;
        background-position:center;
     }
    </style>
<?php
}

Upvotes: 1

Views: 3891

Answers (2)

Md. Ranju Mia
Md. Ranju Mia

Reputation: 164

Please try this one, you need not mention there echo, just give please:

<?php echo plugins_url( 'images/test.png', FILE ) ; ?>

Upvotes: 1

Noman
Noman

Reputation: 1487

You can use semi-relative path or full path.

Semi:

#preloader {
    background-image: url( '/wp-content/plugins/pluginName/images/test.png' );
}

Full Path:

#preloader {
    background-image: url( 'http://yourWebsite.com/wp-content/plugins/pluginName/images/test.png' );
}

For Dynamic Background you have to use this hook:

function dynamicPicture() {
    global $post;
    $backgroundImage = get_post_meta( $post->ID, 'background', true );
    if( $backgroundImage ) :
    ?>
        <style type="text/css">
        #preloader { background-image: url(<?php echo $backgroundImage;?>); }
        </style>
    <?php
    endif;
}
add_action( 'wp_print_plugin_style', 'dynamicPicture' );

Edit:

<?php
'<img src="' . plugins_url( 'images/test.png', __FILE__ ) . '" > ';
?>

For further Reference.

Upvotes: 3

Related Questions