zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden background-image und background-size

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.04.2019, 16:30
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard 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.
__________________


Geändert von AndreasB (28.04.2019 um 16:33 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.04.2019, 18:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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;
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.04.2019, 19:00
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

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.
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 28.04.2019, 19:33
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.776
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 28.04.2019, 19:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 28.04.2019, 20:58
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@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.
__________________

Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigation positionieren maybebabe CSS 4 08.04.2013 22:17
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Inline Listenelement wird nicht richtig im background befüllt SteveB CSS 3 28.04.2011 20:41
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 01:35
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 15:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:19 Uhr.