Background-Image im Header?

Hallo,

ich bin gerade dabei meinen Shop einwenig umzudekorieren und versuche gerade ein Hintergrundbild für den Header einzufügen. Dazu habe ich in der Datei "header.less" unter "_modules" diesen Code geschrieben bzw. überarbeitet: 

.header-main {
    .unitize(padding-bottom, 10);

    //background: #fff;
    background-image: url("../../img/backgroundheader.jpg");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;

    border-bottom: 1px solid @brand-primary;

    // Hide the currency and language switcher
    .top-bar { display: none }

	// Logo
	.logo-main {
		.unitize-padding(10, 10);


		.logo--link {
			.unitize-height(35, 16);
			display: inline-block;
            max-width: 100%;
		}

		// Smaller logo for mobile viewports
		.logo--shop {
			.unitize-height(35, 16);
			width: 50%;
		}

		.logo--supportinfo { display: none; }
	}

    .header--navigation { position: relative; }
}

Das Bild wird auch angezeigt aber nicht richtig. Hier ein Screenshot davon: 

Das Bild wird nur Stellenweise angezeigt. Es scheint als ob die Elemente wie die Suche eine größere Box haben als man sieht und das diese nicht transparent ist? Oder was ist hier los? Wie bekomme ich das ganze richtig hin? 

Würde mich über schnelle Hilfe sehr sehr freuen!

Schonmal vielen Dank

Gruß

Oliver