Retrieve Header Background Image with AJAX

It was easier than i thought.
After a lot of reading and trying I’ve finally got it !
This is the answer with explications if it can help someone.
1- In functions.php localize hero.js

function mytheme_header_script() {

    // Adding custom javascript file to handle the header image.
    wp_enqueue_script('mytheme-hero', get_theme_file_uri() . '/assets/js/hero.js', array('jquery'), '', true); // I'm putting the script in the footer

    // Declare $post global if used outside of the loop.
    $post = get_post();

    // Retrieve the featured image by using wp_get_attachment_image_src
    // and include the id of the post as a parameter for get_post_thumbnail_id (which we retrieve using $post->id)
    $heroImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), '');

    // This is an array of values that we will use each by it's key in hero.js script file
    $heroSettings = array (
        'featured_image'     => $heroImg[0], // Retrieve the featured image and display it if set
        'default_image'      => get_template_directory_uri() . '/components/header/images/default-hero.jpg', // Display the default image if no featured image is set
        'has_post_thumbnail' => has_post_thumbnail(), // To use the function in js
        'ajaxurl'            => admin_url( 'admin-ajax.php' ), // The URL to admin-ajax.php
        'success'            => 'Hooray, it worked! The featured image is loaded', // Print this message in the console if the featured image is displayed
        'default'            => 'The default image is loaded' // Print this message in the console if the default image is displayed
    );
    // Now use the wp_localize_script function
    // Set the same $handle as the script to localize it
    // hero-set is the name of the js variable that will contain the data
    // $heroSettings is the array of data to retrieve in js by hero_set
    wp_localize_script('mytheme-hero', 'hero_set', $heroSettings);
}
add_action('wp_enqueue_scripts', 'mytheme_header_script');

2- Still the same 🙂

3- hero.js became this

(function($) {

    // Define the fullscreen function
    fullscreen();

    // Tell the fullscreen function what to do using ajax
    function fullscreen() {
        $.ajax({
            type: 'POST', // use $_POST method to submit the data
            url: hero_set.ajaxurl, // submit the data to admin-ajax.php
            data: {
                action : 'mytheme_header_style'
                // process mytheme_header_style function by the requested data action
            },
            // use beforeSend so the background header image is retrieved and displayed
            // wright away before anything else to speed the page load
            beforeSend : function(){
                // if a featured image is set
                if (hero_set.has_post_thumbnail){
                    // log the success message to the console
                    console.log(hero_set.success);
                    $('#masthead').css({
                        'background-image': 'url(' + hero_set.featured_image + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                } else {
                    // if no featured image is set
                    // log the default message to the console
                    console.log(hero_set.default);
                    $('#masthead').css({
                        'background-image': 'url(' + hero_set.default_image + ')',
                        width: $(window).width(),
                        height: $(window).height()
                    });
                }
            }
        });
    }

    // Run the function in case of window resize.
    $(window).resize(function(e) {
        e.preventDefault();
        fullscreen();
    });
})(jQuery);

That’s all folks, hope it will help someone.
SYA