Hintergrundfarbe weg. Foto rein.

[scherenschlag]

Moin.
Schaut bitte mal auf diese, sich im Bau befindliche, Seite.
https://www.tsad17.de
Und da auf Speisen und Getränke.
Wie bekomme ich statt des hellblauen Hintergrundes in der Kopfzeile ein Foto rein?
Irgendwas aus Griechenland....
Ist erstmal nur ein Versuch wie es aussieht.
Thanks.

[Tommy Herrmann]

Moin,

willst Du jetzt anstelle der Hintergrundfarbe ein Bild?





Also ungefähr so:

… dann müsstest Du das anstelle der Farbe einfügen:

background: #e9f6ff;

Farbe - jetzt:

Code: Alles auswählen

.card-box {
  position: relative;
  z-index: 5;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: #e9f6ff;
  border-radius: 25px;
  border: 2px solid #0225ac;
  transition: 1s all;
  opacity: 1;
}

Hintergrund-Bild:

background: url(https://www.mobirise-tutorials.com/imag ... nd-Bar.jpg);
background-repeat: no-repeat;
background-size: auto;

... anstelle der Farbe:

Code: Alles auswählen

.card-box {
  position: relative;
  z-index: 5;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: url(https://www.mobirise-tutorials.com/images/Griechenland-Bar.jpg);
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 25px;
  border: 2px solid #0225ac;
  transition: 1s all;
}

Jetzt müsste man das Bild noch so bearbeiten, dass es eine geringere Deckkraft aufweist, sodass man die Schrift noch erkennt oder das auch in der Card mit CSS machen. Dazu müsste ich aber ganz genau das Thema und den Block wissen, damit man das hier mal testen kann.

[scherenschlag]

Schon mal Danke.
Infos schicke ich morgen.
Bin gerade auf Achse....

[scherenschlag]

Moin.
So versucht und eingebaut.
Hat auch geklappt.
Die Idee von mir ist allerdings nicht so prickelnd.
Das Speisekartenfeld ist für ein Hintergrundbild zu schmal.
Und vor allem zu voll. (Liegt am Wirt )
Ich behalte mir das Hintergrundbild mal in der Hinterhand.
Ansonsten habe ich mit schon wieder was Neues einfallen lassen.
Ist besser ....
Danke.......