Image Hintergrund im Header Top B

hjschorn
Offline Topic Author
Fresh Boarder
Posts: 9
Thank you received: 0

Image Hintergrund im Header Top B was created by hjschorn

Posted 6 years 11 months ago #23428

Hallo,
ich benutze Joomla 3.9.5 mit dem Fire Template.
Ich möchte mir ein Background Image im Bereich "Section Top B" unskaliert anzeigen lassen. Die sonstigen Funktionen in diesem Bereich sollten vorhanden bleiben, nur das Image soll 1:1 angezeigt werden.

Kann mir jemand weiter helfen.
Vielen Dank

by hjschorn

Please Log in or Create an account to join the conversation.

cg
Offline
Gold Boarder
Posts: 182
Thank you received: 53

Replied by cg on topic Image Hintergrund im Header Top B

Posted 6 years 11 months ago #23429

Hi,
du kannst mal folgenden Code in der custom.css probieren:

Code:

.home #top-b { /* "home" per Seitenklasse im Menü hinzugefügt, sonst bezieht sich der nachstehende Style auf alle "top-b" Positionen */
    background-image: url(images/dein-bild.jpg);  /* geht auch im Customizer */
   /* padding:  5% 0 5% 0 !important;  geht auch im Customizer (hiermit kann man in gewissen Grenzen den Ausschnitt, der dargestellt wird beeinflussen) */
   background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  /* background-size: cover;   Resize the background image to cover the entire container */  
  background-size: contain;   /* ich glaube, dass möchtest du */    
 /* nach meinen Erfahrungen führt "contain" jedoch zu Löchern im Layout bei der mobilen Ansicht. Dann musst du mobil per media Queries wieder mit  "background-size: cover; " überschreiben */
}

by cg

Please Log in or Create an account to join the conversation.

hjschorn
Offline Topic Author
Fresh Boarder
Posts: 9
Thank you received: 0

Replied by hjschorn on topic Image Hintergrund im Header Top B

Posted 6 years 11 months ago #23433

Danke für die schnelle Antwort. Ich werde es morgen einbauen und testen.

by hjschorn

Please Log in or Create an account to join the conversation.

hjschorn
Offline Topic Author
Fresh Boarder
Posts: 9
Thank you received: 0

Replied by hjschorn on topic Image Hintergrund im Header Top B

Posted 6 years 11 months ago #23502

Sorry, für die verspätete Rückmeldung, bin leider erst jetzt zum testen gekommen.
Ich bekomme die Abbildung ohne Skalierung nicht hin.
Das Hintergrundbild wird immer noch skaliert.

Ich habe folgendes gemacht:
Eintrag in Warp Layouts unter Sektion Top B den Pfad des Bildes.
Eintrag Sektion Padding 5% 0 5% 0
In die Custom geschrieben -
.home
#top-b {
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
background-size: contain; /* ich glaube, dass möchtest du */
/* nach meinen Erfahrungen führt "contain" jedoch zu Löchern im Layout bei der mobilen Ansicht. Dann musst du mobil per media Queries wieder mit "background-size: cover; " überschreiben */
}

Was mache ich nur falsch?

Last Edit:6 years 11 months ago by hjschorn

Last edit: 6 years 11 months ago by hjschorn.

Please Log in or Create an account to join the conversation.

hjschorn
Offline Topic Author
Fresh Boarder
Posts: 9
Thank you received: 0

Replied by hjschorn on topic Image Hintergrund im Header Top B

Posted 6 years 11 months ago #23503

Ich habe noch einmal weiter geforscht. :-)

Sobald ich die Entwickler Tools (Chrome) einschalte, sehe ich das Hintergrundbild in voller Größe, unscaliert. So wie es sein soll.
Sobald ich aber die Entwickler Tools ausschalte, erscheint das Bild wieder skaliert.

Ich möchte doch nur ein unscaliertes Kopfbild in #TOP B haben, mit einem von oben einfließenden Logobild. Alles Weitere würde ich am liebsten abschalten, schaffe es jedoch nicht. Wahrscheinlich ist das Fire Template doch zu komplex für mich. :-)