Background-Image im Header?

Shopware 5 Allgemein
1

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: 

1349×144 38 KB

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

2

Die entsprechenden Elemente transparent machen  Wink

1 „Gefällt mir“
3

@sonic schrieb:

Die entsprechenden Elemente transparent machen  Wink

Danke, so in etwas wollte ich das auch machen aber ich finde die richtigen Stellen nicht. Mein Problem ist jetzt wenn ich den Container transparent mache wirkt sich das auf alles aus. Ich weiß nicht ob man versteht was ich meine aber wenn ich das z.B. mit der untersuchen Funktion im Browser testweise versuche es transparent zu setzen wird alles was ich im body habe genau so auf transparent gesetzt. Wahrscheinlich hängen die miteinander zusammen. Aber wie kann ich das nun trennen? Bei einer so großen Struktur traue ich mich nicht einfach alles zu verändern weil ich mich nur so im Mittelfeld bewege mit meinen Kenntnissen.

Ein paar Hinweise oder dergleichen würden mich sehr freuen.

 

*edit* 

oh und mir fellt grad ein das ganze muss ich ja auch noch Update sicher hinbekomen… Was muss ich da beachten? Ich versteh die Zusamenhänge in Shopware noch nicht so ganz. Also wo und wie die less, css Dateien eingebunden werden etc. Es sind so viele Dateien und Ordner das ich einfach nicht durchblicke. Ich lese mir schon alle Dokus durch die ich finde…

4

Du musst dann schon verschachteln - dann geht das auch. Mit den Entwicklertools von Chrome kann man das doch gut nachschauen.
Den DIVs von innen nach aussen folgen. Es bringt Dir jetzt nicht, wenn ich Dir meine less gebe, weil ich noch einen DIV um den ganzen Header und Menü gepackt habe.

Grob extrahiert - probier mal das in der header.less

@media screen and (min-width: @tabletViewportWidth) { // View für Tablets und Desktops
	.header-main {
		background-color: transparent;
			
		.top-bar {
			.container {
				background-color: transparent;
			}
		}
		
		.header--navigation {
			background-color: transparent;
		}
	}
}

 

1 „Gefällt mir“
5

@sonic schrieb:

Du musst dann schon verschachteln - dann geht das auch. Mit den Entwicklertools von Chrome kann man das doch gut nachschauen.
Den DIVs von innen nach aussen folgen. Es bringt Dir jetzt nicht, wenn ich Dir meine less gebe, weil ich noch einen DIV um den ganzen Header und Menü gepackt habe.

Grob extrahiert - probier mal das in der header.less

@media screen and (min-width: @tabletViewportWidth) { // View für Tablets und Desktops
.header-main {
background-color: transparent;

.top-bar {
.container {
background-color: transparent;
}
}

.header–navigation {
background-color: transparent;
}
}
}

 

 Vielen Vielen Danke. Das hat mir sehr geholfen. Ich muss mich noch intensiver damit auseinander setzen. Es ist echt interessant und ich würde das gerne können so wie du. Ist es Okey wenn ich dich noch ein paar Kleinigkeiten frage? 

6

Wie man sein Theme erstellt - und auch updatesicher - steht ja eigentlich alles hier:
Shopware 5 Theme Startup Guide