I have one page where I've put three tabs. After clicking on each tab, the related text gets changed. I want to put three images for each of the tab so when a user clicks the tab, the image should get changed.
Sharing the theme link:

<https://www.themographics.com/wordpress/docdirect/>

Here's how the text gets changed on tabs with each click.. Sharing JS

//Swap Titles

```
jQuery(document).on('click','.current-directory',function(){    
        jQuery(this).parents('ul').find('li').removeClass('active');
        jQuery(this).addClass('active');
        var dir_name    = jQuery(this).data('dir_name');
        var id  = jQuery(this).data('id');
        jQuery(this).parents('.tg-banner-content').find('em.current_directory').html(dir_name);

        if( Z_Editor.elements[id] ) {
            var load_subcategories = wp.template( 'load-subcategories' );
            var data = [];
            data['childrens']    = Z_Editor.elements[id];
            data['parent']      = dir_name;
            var _options    = load_subcategories(data);
            jQuery( '.subcats' ).html(_options);
        }

    });

    //Prepare Subcatgories
    jQuery(document).on('change','.directory_type', function (event) {
        var id        = jQuery('option:selected', this).attr('id');     
        var dir_name    = jQuery(this).find(':selected').data('dir_name');

        if( jQuery( '.dynamic-title' ).length ){
            jQuery( '.dynamic-title' ).html(dir_name);
        }

        if( Z_Editor.elements[id] ) {
            var load_subcategories = wp.template( 'load-subcategories' );
            var data = [];
            data['childrens']    = Z_Editor.elements[id];
            data['parent']      = dir_name;
            var _options    = load_subcategories(data);
            jQuery( '.subcats' ).html(_options);
        }
    });

```

Here's thee CSS which I tried to modify but I'm only able to add one image to the background, which is static. I want to add 3 images that should change with the text. 
Here's the CSS

```
.tg-homebanner{position: relative;}
.tg-homebanner figure{
    width: 100%;
    float: left;
    margin: 0;
    z-index: 1;
    position: relative;
}
.tg-homebanner figure img{
    display: block;
    width: 100%;
    /*min-height: 650px;*/
}
.tg-banner-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, 0.9);
}
/*Here I've made changes and successfully added a background image, but the problem is I want to put 3 images that should be changed with each click*/

.tg-banner-content .form-searchdoctors .tg-btn{color: #fff;}
.tg-homebanner .tg-searchform .tg-btn{color: #fff;}
.tg-homebanner .tg-location-map{height: 800px;}
.tg-mapbox .tg-location-map{
    height: 100%;
    position: absolute;
}
.show-search{
    position: absolute;
    height: 100%;
    width: 70px;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24px;
    text-align: center;
    display: none;
    cursor: pointer;
}
.show-search i{
    position: relative;
    top: 50%;
}

```

Here's the changes I've made as mentioned above:

```
.tg-banner-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: url('URL OF MY IMAGE') center center no-repeat;
  background-size: cover;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image:linear-gradient(to bottom right,#002f4b,#dc20000);
    opacity: 1;
}

```

But it only puts a single background image that doesn't change with clicks.
['https://Stackoverflow.com/questions/40451226', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5997920/']
Add the following line to your **.htaccess**, so the server can recognize svg files from your css file (background: url("images/CC\_logo.svg") no-repeat center top;), Insert this line:

```
RewriteRule !\.(js|ico|gif|jpg|jpeg|svg|bmp|png|css|pdf|swf|mp3|mp4|3gp|flv|avi|rm|mpeg|wmv|xml|doc|docx|xls|xlsx|csv|ppt|pptx|zip|rar|mov)$ index.php

```

No need to have so many rules as above but depends on what you need for the format you would like to have on your site, but for your current question here, please make sure there is "**svg**" in the rule of your .htaccess file.

It works, try it! :)
Make sure that your SVG was exported properly. I've found problems with Photoshop images exported as SVGs but I've never had an issue with Illustrator files exported as SVGs.