CSS background images in WordPress

To determine the url of the image:

If it's an image that you add to a folder within the theme. You can use get_stylesheet_directory_uri () which should point to the root of your theme where is the style.css and from there you build the route to the image.

If the image is in the media Library you can either take the url directly if you know it will not change, or make stubs like, regardless of the name, set a specific slug, and then look for the image using the slug.

function get_attachment_url_by_slug( $slug ) {
  $args = array(
    'post_type' => 'attachment',
    'name' => sanitize_title($slug),
    'posts_per_page' => 1,
    'post_status' => 'inherit',
  );
  $_post_imagen = get_posts( $args );
  $post_imagen = $_post_imagen ? array_pop($_post_imagen) : null;
  return $post_imagen ? wp_get_attachment_url($post_imagen->ID) : '';
}

wp_get_attachment_url ($ post_image-> ID)

Ref. a question in SO

Going to the css.

If the css is setting it as a style attribute of an element in the html with recovering the url of the image with one of the previous methods, you would already be. There would not be much more complexity.

EDITED I

<?php
$estilo = 'background-image: url(\'' . get_stylesheet_directory_uri() . '/img/serrucho-2.jpg\')';
?>
<div style="<?php echo esc_attr($estilo); ?>"></div>

If the css is in its own .css file, then I do not think you can do it on PHP. Yes you can do it with a script for example using jQuery.

The script reads the url of the image of a variable set with wp_localize_script () , and assigns it to the css of the class you need with a jQuery function.

The script itself, you add it to a folder within the theme, and you download it to the page with wp_enqueue_script () when the request is for that template you are working on.

Important note: Any modification to a theme, I assume that you make it in a child-theme so as not to lose the changes to an update.