Hintergrundbild (Icon vor Headline), automatische Größe

[Tobi44]

Hallo,

ich zeige vor Überschriften Grafiken bzw. Icons an.
Diese sind derzeit per background-image und background-size: cover so eingestellt, dass sie ihre Größe selbst anpassen. Funktioniert wunderbar.

Wird nun das Fenster so klein gemacht oder am Smartphone betrachtet, wird die Überschrift in bspw. 2 Zeilen dargestellt, und das Icon entsprechend vergrößert.

Welche Möglichkeiten habe ich nun, damit der Text entsprechend Abstand vom Icon bekommt?
Gebe ich ein padding-left, klappt das, aber wenn die Headline zweizeilig angezeigt wird und die Grafik sich somit vergrößert, wird sie natürlich teilweise vom Text überdeckt.

Ein solches Icon per img-Tag einzubinden macht man ja nicht mehr.

Wie kann ich dieses Problem lösen, aber den Effekt der sich vergrößernden Grafik behalten?

Danke.

 

[Tobi44]

Hallo,

danke für Deine Antwort. Ich habe es bisher immer so gehandhabt, Icons als background-image einzubinden, und dem Text dann ein entsprechendes padding-left zu geben.

Ich hätte auch nichts gegen eine :before und content:url(''); Methode, allerdings habe ich damit keine Erfahrung und weiß nicht, wie ich damit einen solchen Effekt hinbekomme.

Gruß

 

[Tobi44]

Hallo,

Ziel ist es, dass das Icon vor bzw. links neben dem Text sich entsprechend vergrößert, wenn der zugehörige Text zweizeilig wird (z. B. bei verkleinertem Browserfenster oder am Smartphone).

Derzeit habe ich es so:

.iconHeadline {
    padding-left: 50px;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: left center;
}

.iconHeadline.premiumUpgrade {
    background-image: url('/grafiken/if_Premium_Service_770963_128.png');
}

Gruß

 

[Tobi44]

Hallo,

das muss auch mit CSS gehen. Ich bin (m)einer Lösung schon näher gekommen. Sobald ich meine, eine einsatzfähige Lösung gefunden zu haben, melde ich mich wieder. :)

Es ist immer wieder interessant, wie lange man sich mit einem solch kleinen Problem auseinandersetzen kann.

Gruß

 

[Tobi44]

Hallo,

bin zwar nach wie vor der Meinung, dass das mittels CSS möglich ist. Gebe aber auf und mich zugleich mit der "einfachen Version" zufrieden: Das begleitende Icon hat nun eine feste Größe und der Text ein padding-left, sodass der Abstand zur Grafik immer der gleiche ist. Sieht auch fein aus...

Danke