CSS background image not working on Wordpress

Question

I'm new to Wordpress theme development. i was trying to convert a static html theme to wordpress but my background image is not working here's the code

<div class="hero-slides owl-carousel">
            <!-- Single Slide -->
            <div class="single-hero-slide bg-img background-overlay" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2018/07/bg1.jpg);"></div>
            <!-- Single Slide -->
            <div class="single-hero-slide bg-img background-overlay" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2018/07/bg2.jpg);"></div>
</div>

when i inspect element the background-image url() shows empty. the static html page works just fine.

Answer 1

First Check that all the JS and CSS files for the slider, are loaded correctly in the page.

To get the path to theme directory use <?php bloginfo('template_directory'); ?>

Then in your html you can use this as the path to the image

<div class="single-hero-slide bg-img background-overlay" `style="background-image: url(<?php bloginfo('url'); ?>/wp-content/uploads/2018/07/bg1.jpg);"></div>

My guess is that this is an issue with loading of js files, double check by debugging the console for errors from developers tools in the browser.

Answer 2

Sorry guys false alarm. the problem was with my editor. It wasn't saving the php file. I restarted my pc had to re-enter the image path now it worked.