Background Bild (SVG) im <h1>

[Nachtfalke]

Hallo Tommy,

ich habe mich als "eigentlich totaler Anfänger" mal an einem Background- Bild im Titel <h1> gewagt.
Hierfür habe ich im CSS unter „.mbr-section-title“ einfach das rot markierte eingefügt:

.mbr-section-title {
margin-bottom: 24px;
color: #222222;
width: 100%;
background: url(http://dm-webmedia.de/kolbm/headline-ba ... EF7C00.svg);
background-repeat: no-repeat;
background-position: calc(3%) calc(45%);
padding: 50px;
margin: -50px;
background-size: 240px;
}

Es funktioniert auch und Fehler sehe ich auch keine.

Siehe unter http://dm-webmedia.de/kolbm/ gleich im ersten Block „Kompetente und Fachliche Beratung“

Nun die Frage… Kann ich das überhaupt so machen ?

[Tommy Herrmann]

Moin Dieter,

das sieht doch richtig aus ...

Weiche CSS-Class das nun gerade von Mobirise ist, kommt immer auf das Thema und den Block an. Bei Dir offensichtlich die Überschrift. Wenn was an der CSS falsch ist, dann passiert da weiter nichts - außer das es nicht angezeigt wird.

... prima

... ein bisschen problematisch ist natürlich die feste Hintergrund-Größe von 240px, denn an einem kleineren Bildschirm verändert sich dadurch dann die Position und relative Größe zum Titel natürlich.

Bei einer weißen Schrift auf weißem Hintergrund ist das etwas heikel, falls die Schrift mal, durch eine veränderte Display-Größe, außerhalb des Hintergrunds rutscht.

Mir fällt da aber auf die Schnelle auch nichts ein, außer man gestaltet vielleicht gleich ein Bild mit Schrift auf diesem Hintergrund, welches sich dann prozentual verkleinert.

So sieht das dann z.B. an meinem Smartphone "Samsung Galaxy S22" aus. Ich finde das jetzt aber auch ganz OK, nur ist es wahrscheinlich nicht so von Dir gedacht gewesen:

Du könntest mal ausprobieren, wie ein kleinerer Hintergrund am Handy von z.B. 180px aussieht - aber bitte erst testen, ist jetzt ein rein theoretischer Gedanke. Dann diese Media-Anweisung einfach noch in dem CSS-Editor unten mit dran schreiben.

Code: Alles auswählen

@media (max-width: 767px) {
  .mbr-section-title {
    background-size: 180px;
  }
}

... dann müsste man aber wahrscheinlich auch noch die Hintergrund-Position in der Media-Anweisung ändern.

Kommt mir alles etwas zu zufällig vor

[Nachtfalke]

Guten Morgen Tommy,

1000 mal und mehr ein Dankeschön.
Das war ja einfach, Hintergrund-Position habe ich noch miteingefügt und es Funktioniert... doch kein Zufall...

.mbr-section-title {
margin-bottom: 24px;
color: #222222;
width: 100%;
background: url(http://dm-webmedia.de/kolbm/headline-ba ... EF7C00.svg);
background-repeat: no-repeat;
background-position: calc(3%) calc(45%);
padding: 50px;
margin: -50px;
background-size: 240px;
}
@media (max-width: 767px) {
.mbr-section-title {
background-size: 160px;
background-position: calc(16%) calc(35%);
}
}

Was ich schon die ganze Zeit mal sagen möchte… Alles was ich bisher mit Mobirise (html- CSS) gelernt habe, kommt vom Learning by Doing mit all dem Wissen aus diesem Forum. Danke an alle Mitwirkenden!