Expand background to entire page when focusing on single container with intro.js

Question

I'm using intro.js to tour a specific element

introJs("#section1").start()

Is there any way I can expand the background to the entire page even when focusing on a single element ?

JSBIN example (try to activate the tour for the bottom sections)

I've tried overriding introjs-overlay

.introjs-overlay { 
  width:100%!important; 
  height:100%!important;
  top:0!important;
  left:0!important;
}

but setting top to 0 pins the overlay section to the top of the page (if not overriden it's sticks to the specified element).

score 0 · Accepted Answer · answered Mar 04 '14 at 13:17

0

This should fix it:

.introjs-overlay {
   position: fixed!important;
}

answered Mar 04 '14 at 13:17

Iulian Anghel

I meant add this to the overrides you already made. Fixed position should make the overlay stick to the window, not to the document. – Iulian Anghel Mar 04 '14 at 13:22

1 Answers1