Moin,
es ist immer besser, wenn Du zu Deinen Fragen auch eine Webseite mit Deinen Versuchen zeigst, damit man in den Quelltext gucken kann. Das kann auch eine Testseite in einem Testverzeichnis sein. So ist es immer nur raten, bzw. man weiß sonst nicht, was Du schon selbst geändert hast.
Ich denke mal, Du hast das als Hintergrund von diesem runden Container angegeben, dann fehlen noch die Angabe "ohne Wiederholung" und die "Zentrierung", also z.B. diese Angaben dann so noch hinzufügen:
Code: Alles auswählen
background-image: url('https://www.tsad17.de/assets/images/sonnelogo.png');
background-repeat: no-repeat;
background-position: 50% 50%;
Die Deckkraft (Opacity) sollte von 0.3 (30%) auf 1.0 (100%) erhöht werden, da Mobirise dies fälschlicherweise eingestellt hat. Die Deckkraft der Hintergrundfarbe Weiß wird bereits korrekt über "rgba" in der Hintergrundangabe definiert. Das Logo dagegen, sollte ja nicht halbtransparent sein. Die Opazität wirkt immer auf den gesamten Inhalt des Containers.
Die
class="round" würde dann wahrscheinlich ingesamt so aussehen:
Code: Alles auswählen
.round::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
opacity: 1.0;
height: 100%;
width: 100%;
pointer-events: none;
border: 2px solid white;
border-radius: 50%;
background-image: url('https://www.tsad17.de/assets/images/sonnelogo.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}
Natürlich erscheint dann aber das Sonnenlogo auch im kleinen Kreis unten links, da dort die gleiche Class angewendet wird. Willst Du das nicht, müsstest Du die Original
class="round" kopieren und meinetwegen als
class="round-klein" anstelle dessen an den kleinen Kreis schreiben.
Beispiel ohne Logo für kleinen Kreis unten als
class="round-klein":
Code: Alles auswählen
.round-klein::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
opacity: 0.3;
height: 100%;
width: 100%;
pointer-events: none;
border: 2px solid white;
border-radius: 50%;
}
Oder Du änderst die Logogröße im kleinen Kreis.
Um noch die Größe vom Sonnenlogo als Hintergrund zu bestimmen, könntest Du auch noch die Eigenschaft "background-size" hinzufügen und die Größe im kleinen Kreis so z.B. auf 50% Breite und 50% Höhe reduzieren:
Im Screenshot-Beispiel unten habe ich auch noch diesen linearen, weißen Hintergrund
entfernt, so wie Du es ja anscheinend auch bereits getan hast:
Code: Alles auswählen
background: linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.6) 100%);
und an der von Mobirise, für den kleinen Kreis, zusätzlich definierten
class="round2" auch den niedrigen
z-index: 0; entfernt, damit der Kreis mit der Sonne nicht unter dem großen Text-Container liegt.
… oder Du könntest natürlich auch anstelle des weißen, linearen Hintergrunds eine deckende Hintergrundfarbe einsetzen, wie im Screenshot unten:
