Header image parallax responsive maken voor alle displays

Beste WordPress experts,

Ik heb jullie hulp nodig bij het volgende waar ik tegenaan loop bij het ‘responsive’ laten zijn van de Header image die als slideshow en parralax weergave staat ingesteld in de style.css.
(de site link is: http://www.tekenplus.nl/ )
Mijn vraag: kan iemand mij vertellen wat ik aan moet passen in de style.css(of elders) om de header afbeeldingen die in de slideshow zitten automatisch (beeldschermvullend)de breedte en hoogte van de display van elk apparaat waarop gekeken uit te laten vullen? Want nu zijn de afbeeldingen in de Header wel parallax en gecentreerd in het midden maar zie je maar een klein stukje op een I phone, tablet of zelfs klein beeldscherm van pc…Hierdoor valt bijvoorbeeld ons logo grotendeels weg en de afbeeldingen ook. Nu weet ik dat je met de volgende code dit zo moeten kunnen verwezenlijken: #parallax-bg { background-size: 100% 100%; background-repeat: no-repeat; }
Maar volgens mij staat die al goed…, maar niet in de sectie bij Slide – Slideshow en ik denk dat ik wellicht hier iets moet aanpassen, maar omdat ik maar een leek ben, wil ik graag aan jullie vragen wat ik waar precies moet aanpassen zodat de website en header afbeeldingen in de slideshow het beeldscherm vullen en niet een vaste breedte of hoogte aanhouden maar dus responsive zijn voor diverse apparaten als i phone, tablet en kleinere beeldschermresoluties.
Een deel van de style.css code die hoort bij de header afbeeldingen slideshow ziet er als volgend uit:

3. SLIDER - SLIDESHOW
----------------------------------
*/

.slide-content{
	width:100%;
	margin:auto;
	display:table-cell;
	vertical-align:middle;
}

.slide-content a {
    margin-top: 20px;
	margin-bottom: 20px;
}

.agni_slide{
	width:100%;
	height:100%;
	background-size:cover;
	display:table;
}

.agni_slide-bg-1{
	background-image:url('img/slide-1.jpg');
	background-attachment:fixed;
}

.agni_slide-bg-2{
	background-image:url('img/slide-2.jpg');
	background-attachment:fixed;
}

.agni_slide_bg_overlay{
	position:absolute;
	height:100%;
	width:100%;
	background-color:#000;
	opacity:0.75;
}

.agni_slide_bg_overlay-2{
	position:absolute;
	height:100%;
	width:100%;
	background-color:#fff;
	opacity:0.75;
}

Graag hoor ik of ik op het goede pad zit of dat ik totaal ergens anders de style.css aan moet passen om de header afbeeldingen slideshow responsive te maken. Alvast bedankt voor het meedenken en ik hoor wat jullie tips zijn.
Met vriendelijke groeten, jenny