diff --git a/src/lib/src/components/step/joyride-step.component.html b/src/lib/src/components/step/joyride-step.component.html
index 72ae894c..3fb70641 100644
--- a/src/lib/src/components/step/joyride-step.component.html
+++ b/src/lib/src/components/step/joyride-step.component.html
@@ -1,4 +1,4 @@
-<div #stepHolder class="joyride-step__holder" [style.top.px]="topPosition" [style.left.px]="leftPosition">
+<div #stepHolder class="joyride-step__holder" [id]="'joyride-step-' + step.name" [style.top.px]="topPosition" [style.left.px]="leftPosition">
     <joyride-arrow *ngIf="showArrow" class="joyride-step__arrow" [position]="arrowPosition" [style.top.px]="arrowTopPosition"
         [style.left.px]="arrowLeftPosition"></joyride-arrow>
     <div #stepContainer class="joyride-step__container">
diff --git a/src/lib/src/components/step/joyride-step.component.spec.ts b/src/lib/src/components/step/joyride-step.component.spec.ts
index 298b395b..ef84e8ab 100644
--- a/src/lib/src/components/step/joyride-step.component.spec.ts
+++ b/src/lib/src/components/step/joyride-step.component.spec.ts
@@ -300,6 +300,17 @@ describe('JoyrideStepComponent', () => {
                 expect(stepHolder.nativeElement.style.transform).toBe('translateX(-50px)');
             });
 
+            it('should have id with step name on step holder div', () => {
+                STEP.name = "myStep";
+                component.step = STEP;
+                component.ngAfterViewInit();
+
+                hostFixture.detectChanges();
+
+                let stepHolder = hostFixture.debugElement.query(By.css('.joyride-step__holder'));
+                expect(stepHolder.nativeElement.id).toBe('joyride-step-myStep');
+            });
+
             describe('when the step position is "top"', () => {
                 beforeEach(() => {
                     STEP.position = 'top';
diff --git a/src/lib/src/services/joyride-backdrop.service.spec.ts b/src/lib/src/services/joyride-backdrop.service.spec.ts
index e4e1771e..cb4d8e68 100644
--- a/src/lib/src/services/joyride-backdrop.service.spec.ts
+++ b/src/lib/src/services/joyride-backdrop.service.spec.ts
@@ -84,6 +84,14 @@ describe('JoyrideBackdropService', () => {
             expect(styles.height).toBe('34px');
             expect(styles.getPropertyValue('flex-shrink')).toBe('0');
         });
+
+        it('should set id to contain step name', () => {
+            STEP.name = 'myStep';
+            backdropService.draw(STEP);
+
+            let backdropMiddleContainer = document.getElementsByClassName('backdrop-container')[0];
+            expect(backdropMiddleContainer.id).toBe('backdrop-myStep');
+        });
     });
 
     describe('redraw() and redrawTarget()', () => {
diff --git a/src/lib/src/services/joyride-backdrop.service.ts b/src/lib/src/services/joyride-backdrop.service.ts
index dc6bc7bb..18732441 100644
--- a/src/lib/src/services/joyride-backdrop.service.ts
+++ b/src/lib/src/services/joyride-backdrop.service.ts
@@ -48,6 +48,7 @@ export class JoyrideBackdropService {
         this.renderer.setStyle(this.currentBackdropContainer, 'width', '100%');
         this.renderer.setStyle(this.currentBackdropContainer, 'height', '100%');
         this.renderer.setStyle(this.currentBackdropContainer, 'z-index', '1000');
+        this.renderer.setAttribute(this.currentBackdropContainer, 'id', 'backdrop-' + step.name);
 
         this.backdropContent = this.renderer.createElement('div');
         this.renderer.addClass(this.backdropContent, 'backdrop-content');