XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   background-image und background-size (http://xhtmlforum.de/showthread.php?t=73793)

AndreasB 28.04.2019 17:30

background-image und background-size
 
Moin.


Ich möchte Text durch ein Hintergrundbild ersetzen.


Das Hintergrundbild soll seine Proportion behalten und die volle Breite des Elementes ausfüllen.


Wenn ich für das Element mit dem Text keine Höhe explizit angebe, wird das Hintergrundbild gar nicht dargestellt.


https://codepen.io/fermion/pen/QPoMPg?editors=1100


Wenn ich eine willkürlich gewählte Höhe angebe, wird zwar das Hintergrundbild dargestellt, füllt aber - erwartungsgemäß - nicht die volle Breite aus.
https://codepen.io/fermion/pen/qwvXgv?editors=1100


Auch das Schlüsselwort "cover" löst die Aufgabe erwartungsgemäß nicht:


https://codepen.io/fermion/pen/gyExJP?editors=1100


der Container wird in der Breite ausgefüllt, aber in der Höhe wird das Bild in der Höhe des Containers beschnitten.




Wie löst man bitte so eine Aufgabe, wo das Hintergrund die volle Breite des Containers ausfüllen und seine Proportion beibehalten soll?


Danke.

Sailor56 28.04.2019 19:30

Indem man dem Container keine feste Höhe gibt, sondern die Höhe anhand der gegebenen Proportionen des Bildes berechnet.
Beispiel - Bild (1800x400)
dann width: 100vw;
ergibt height: 22vw;

AndreasB 28.04.2019 20:00

Danke für Deinen Hinweis.


Das SVG-Bild hat die Proportionen 1689/650

Das entspricht 100/38.48


Ich habe Deinen Vorschlag entsprechend in

https://codepen.io/fermion/pen/oOVpXy?editors=1100

umgesetzt.


Aber es klappt nicht.


Zudem hat der umschließende Container "page" ja keine fixe Breite in em, sondern "max-width: 40rem".


Das Bild soll bei Breiten kleiner als diese, von rechts beschnitten werden ohne dass die Höhe gemindert wird.

Grund: ganz links wird sich im Bild ein Logo befinden, welches bei schmaleren Viewport nicht in der Höhe schrumpfen soll.


Ja, es ist kompliziert.

hemfrie 28.04.2019 20:33

Der erste Beitrag ist ein bisschen verwirrend. Da wäre ich ohne Deine jetzige Ergänzung auch eher in die Richtung von Sailor56 gegangen.

Ich hätte dafür einen kleinen hack verwendet: https://codepen.io/anon/pen/ROdjpQ

Jetzt wo Du schreibst, dass das Bild eine fixe Höhe hat, stellt sich das ganze völlig anders dar.

Wenn dem so ist, dann kann Du dem header ja auch eine fixe Höhe geben.
Nämlich genau die 38.48% von 40rem, die ja scheinbar Deine Referenzgröße sein wird.

https://codepen.io/anon/pen/KYEZGq

MrMurphy 28.04.2019 20:47

Zitat:

ganz links wird sich im Bild ein Logo befinden, welches bei schmaleren Viewport nicht in der Höhe schrumpfen soll
Muss es doch auch gar nicht. Mit deinen jetzigen Infos vermute ich, dass du zwei Bilder hast, die du mit einem Grafikprogramm zu einem zusammenfügen willst.

Dann ist es sinnvoller zwei Hintergrundgrafiken zu verwenden. Denen kannst du dann auch einfach eigene, unterschiedliche Verhaltensweisen mit auf den Weg geben. Siehe zum Beispiel

https://developer.mozilla.org/de/doc..._CSS_verwenden

AndreasB 28.04.2019 21:58

@hemfrie
Herzlichen Dank. So funktioniert es in der Tag. Sehr schön. Und mit "calc(...)" kann man die Berechnung auch gleich im CSS durchführen lassen.

@mcmurphy

Grundsätzlich hast Du natürlich Recht: man kann auch mit zwei Hintergrundbildern arbeiten. Aber ich vermute, dass damit nichts gewonnen wäre, weil es keine Situationen gibt, wo die beiden Bildern nicht nebeneinander stehen werden.

Ich selber bin insgesamt kein Freund dieser komplizierten Headerbild-Zuppeleien, aber die Grafikerin wünscht sich das so.



Siehe auch den anderen noch ungelösten Thread zur Frage der Art der Einbindung eines JPGs in ein SVG, welches als Hintergrundbild verwendet wird.


Dort hatte ich ja durch Experimente gezeigt, dass nur die Inline-Einbettung möglich ist und nicht die Einbettung als Verknüpfung.


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:37 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023