skip to Main Content

I’m using Local by Flywheel and my local URL is: http://sarasota-soccer-club.local/. What I’m doing is adding a background image to a div in WordPress: <?php echo get_site_url(); ?>/wp-content/uploads/2023/01/hero-image.jpg. The thing is that the image sometimes doesn’t show. When this happens I just replace the get_site_url() with the local URL and the background image comes back. I’m using PHPStorm and running NGINX on macOS Ventura. Any idea what’s going on? Thanks.

2

Answers


  1. The actual problem is with your theme because sometime theme code conflict issue is happening.

    Better to use get_template_directory_uri() intead of get_site_url().

    <div class="img" style="style="background-image: url('<?php echo get_template_directory_uri()./foldername/imagename' ?>)"
    

    For Reference visit https://developer.wordpress.org/reference/functions/get_site_url/
    https://developer.wordpress.org/reference/functions/get_template_directory_uri/

    Login or Signup to reply.
  2. When using image as a background, it should be located in your theme’s folder (since it’s part of the style) something like this:
    "/wp-content/themes/your-theme/assets/img/hero-image.jpg"

    If you use this approach, then you need to call it using this function:
    get_template_directory_uri() (that will return the path of your theme’s location):

    <div class="img" style="background-image: url(<?php echo esc_url(get_template_directory_uri()) ?>/assets/img/hero-image.jpg)" >
    
    </div>
    

    If you want to continue using your approach you can use:

    <?php echo get_home_url(); ?>
    

    or

    <?php echo site_url(); ?>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search