diff --git a/web/client/components/TOC/fragments/settings/WMSCacheOptions.jsx b/web/client/components/TOC/fragments/settings/WMSCacheOptions.jsx
index 0df967a465..599faa43dc 100644
--- a/web/client/components/TOC/fragments/settings/WMSCacheOptions.jsx
+++ b/web/client/components/TOC/fragments/settings/WMSCacheOptions.jsx
@@ -189,12 +189,14 @@ const infoText = {
  * @prop {object} layer layer configuration
  * @prop {boolean} disableTileGrids disable tile grids toolbar
  * @prop {function} onChange callback triggered after changing the form
+ * @prop {string} owner the owner component name like: 'background-dialog'
  */
 function WMSCacheOptions({
     layer = {},
     projection,
     onChange,
-    disableTileGrids
+    disableTileGrids,
+    owner = ""
 }) {
 
     const [tileGridLoading, setTileGridLoading] = useState(false);
@@ -266,8 +268,41 @@ function WMSCacheOptions({
             .finally(() => setTimeout(() => setTileGridLoading(false), 500));
     };
 
+    const handleGetTileGridSettings = () => {
+        const newTileGridStrategy = layer.tileGridStrategy !== 'custom'
+        ? 'custom'
+        : undefined;
+        const promise = newTileGridStrategy === 'custom'
+            && ((layer?.tileGrids?.length || 0) === 0 || !layer?.tileGridCacheSupport)
+            ? onTileMatrixSetsFetch(layer)
+            : Promise.resolve(undefined);
+        return promise.then(({ tileGrids, tileGridCacheSupport } = {}) => {
+            const hasTileGrids = (tileGrids?.length || 0) > 0;
+            const tileGridStrategy = hasTileGrids
+                ? newTileGridStrategy
+                : undefined;
+            let tileChangedData = {
+                tileGridCacheSupport,
+                tileGridStrategy,
+                tileGrids
+            };
+            if (owner === 'background-dialog' && newTileGridStrategy === 'custom') {
+                tileChangedData = {
+                    ...tileChangedData, tiled: true, tileGridStrategy: 'custom'
+                }
+            }
+            handleOnChange(tileChangedData);
+        });
+    };
+
     const InfoText = infoText[layer.tileGridStrategy] || infoText.standard;
 
+    // fetching grid data in case background layers
+    React.useEffect(() => {
+        if (layer.remoteTileGrids && owner === 'background-dialog') {
+            handleGetTileGridSettings();
+        }
+    }, [])
     return (
         <div className="ms-wms-cache-options">
             <div className="ms-wms-cache-options-content">
@@ -320,26 +355,7 @@ function WMSCacheOptions({
                         glyph={layer.tileGridStrategy === 'custom' ? 'grid-custom' : 'grid-regular'}
                         bsStyle={layer.tileGridStrategy === 'custom' ? 'success' : 'primary'}
                         className="square-button-md"
-                        onClick={() => {
-                            const newTileGridStrategy = layer.tileGridStrategy !== 'custom'
-                                ? 'custom'
-                                : undefined;
-                            const promise = newTileGridStrategy === 'custom'
-                                && ((layer?.tileGrids?.length || 0) === 0 || !layer?.tileGridCacheSupport)
-                                ? onTileMatrixSetsFetch(layer)
-                                : Promise.resolve(undefined);
-                            return promise.then(({ tileGrids, tileGridCacheSupport } = {}) => {
-                                const hasTileGrids = (tileGrids?.length || 0) > 0;
-                                const tileGridStrategy = hasTileGrids
-                                    ? newTileGridStrategy
-                                    : undefined;
-                                handleOnChange({
-                                    tileGridCacheSupport,
-                                    tileGridStrategy,
-                                    tileGrids
-                                });
-                            });
-                        }}
+                        onClick={handleGetTileGridSettings}
                     />
                 </div>}
             </div>
diff --git a/web/client/components/background/BackgroundDialog.jsx b/web/client/components/background/BackgroundDialog.jsx
index e719a69ed4..53c4c99d29 100644
--- a/web/client/components/background/BackgroundDialog.jsx
+++ b/web/client/components/background/BackgroundDialog.jsx
@@ -184,6 +184,7 @@ export default class BackgroundDialog extends React.Component {
                         projection={this.props.projection}
                         onChange={value => this.setState(value)}
                         disableTileGrids={this.props.disableTileGrids}
+                        owner={"background-dialog"}
                     />
                 </FormGroup>}
                 <Button>
diff --git a/web/client/components/background/__tests__/BackgroundDialog-test.jsx b/web/client/components/background/__tests__/BackgroundDialog-test.jsx
index 984d53ecf5..9e3d7665f4 100644
--- a/web/client/components/background/__tests__/BackgroundDialog-test.jsx
+++ b/web/client/components/background/__tests__/BackgroundDialog-test.jsx
@@ -4,6 +4,10 @@ import * as TestUtils from 'react-dom/test-utils';
 import expect from 'expect';
 import BackgroundDialog from '../BackgroundDialog';
 
+import axios from '../../../libs/ajax';
+import MockAdapter from 'axios-mock-adapter';
+let mockAxios;
+
 describe('test BackgroundDialog', () => {
     beforeEach((done) => {
         document.body.innerHTML = '<div id="container"></div>';
@@ -83,4 +87,36 @@ describe('test BackgroundDialog', () => {
         const wmsCacheOptionsToolbar = document.querySelector('.ms-wms-cache-options-toolbar');
         expect(wmsCacheOptionsToolbar).toBeTruthy();
     });
+    it('should render with WMS cache options with remoteTileGrids = true', (done) => {
+        mockAxios = new MockAdapter(axios);
+        mockAxios.onGet().reply(200, {
+            tileMatrixSets: [],
+            tileMatrixSetLinks: [],
+            tileGrids: [],
+            styles: [],
+            formats: []
+        });
+        ReactDOM.render(<BackgroundDialog
+            layer={{
+                type: 'wms',
+                url: '/geoserver/wms',
+                name: 'workspace:name',
+                remoteTileGrids: true
+            }}
+        />,
+        document.getElementById("container"));
+        setTimeout(() => {
+            const modalNode = document.querySelector('#ms-resizable-modal');
+            expect(modalNode).toBeTruthy();
+            const wmsCacheOptionsContent = document.querySelector('.ms-wms-cache-options-content');
+            expect(wmsCacheOptionsContent).toBeTruthy();
+            const wmsCacheOptionsToolbar = document.querySelector('.ms-wms-cache-options-toolbar');
+            expect(wmsCacheOptionsToolbar).toBeTruthy();
+            const wmsCacheCustomGridOption = document.querySelector('.ms-wms-cache-options-toolbar button.active span.glyphicon-grid-custom');
+            expect(wmsCacheCustomGridOption).toBeTruthy();
+            const wmsCacheRefreshOption = document.querySelector('.ms-wms-cache-options-toolbar .glyphicon-refresh');
+            expect(wmsCacheRefreshOption).toBeTruthy();
+            done();
+        }, 1000);
+    });
 });