Selbstskalierendes Hintergrundbild

[nookie]

Ich habe mir nochmal die ganze Konversation durchgelesen und habe kein Mangel an Infos gefunden könntest du mir bitte konkret sagen was du noch zu wissen brauchst?

background-size: cover;
passt die Grafik proportinal dem Anzeigebereich an.

background-size: contain;
skaliert das Bild so groß wie möglich aber so, dass es vollständig in das Eltern Element passt.


Vllt. hilft dir das jetzt weiter: http://jsfiddle.net/723vtzhw/

 

[MrMurphy]

Hallo,

ich habe jetzt einfach mal eine Testseite erstellt, in die ich deine Vorstellungen (so wie ich sie verstanden habe) soweit möglich und sinnvoll eingebaut habe.

Für den praktischen Gebrauch muss sie natürlich noch überarbeitet werden, zum Beispiel müssen die CSS-Selektoren weiter eingegrenzt werden. Mir kommt es bei der Seite nur auf die Grundlagen an.

Veraltete starre Seiten mit einer festen Breite erstelle ich grundsätzlich nicht. Deshalb habe ich die Seite flexibel mit zwei MediaQueries erstellt. Dadurch wird die Navi bei breiten Fenstern wie gewünscht als Zeile dargestellt, bei Verkleinerung als Buttons und bei weiterer Verkleinerung als Aufklappmenü. Alles nur und ausschließlich mit CSS, ohne JavaScript. Für das Aufklappmenü musste ich im HTML-Quelltext noch zwei Zeilen einfügen. Ansonsten entspricht der body-Quelltext meinem bereits geposteten. Die Seite kann natürlich auch mit einer festen Breite versehen werden, das überlasse ich aber den Ahnenforschern.

Das die Überschrift bei einem MediaQuery-Umbruch die Größe ändert ist von mir gewollt und extra eingbaut, da sie für mich sonst benutzerunfreundlich zu klein wird. Das kann also geändert werden.

Für die Praxis sollten natürlich noch header-, main- und footer-Elemente hinzugefügt werden. Darum ging es mir aber ausdrücklich nicht.

http://foreninfo.bplaced.net/seiten...mknoebi_02_schrift_mit_hintergrundgrafik.html

Gruss

MrMurphy

 

[hoemknoebi]

@MrMurphy So ist es fast wie ich es bräuchte joch ist das Bild nicht immer ganz zu sehen.

 

[MrMurphy]

Hallo,

So ist es fast wie ich es bräuchte joch ist das Bild nicht immer ganz zu sehen.

Das wird den Besuchern sowas von egal sein. Mir ist es halt wichtiger das das Bild nicht verzerrt wird.

Aber ich habe das angepasst. Das Bild ist jetzt immer ganz zu sehen.

Du hast aber schon verstanden, das es sich nur um eine Beispiel-/Testseite handelt, die du relativ einfach deinen bislang bekannten Wünschen anpassen musst?

Gruss

MrMurphy

 

[hoemknoebi]

Erstens mal begreiffe ich irgendwie al diese css befehle nicht ganz.(Das liegt aber an mir und muss ich mit Kolleg Google herausfinden.)
Aber ich begreiffe nicht wieso das sich das Bild noch verzieht.

 

[MrMurphy]

Hallo

Aber ich begreiffe nicht wieso das sich das Bild noch verzieht.

ES HANDELT SICH UM EINE TESTSEITE!!!!!!!

Ich habe doch bereits darauf hingewiesen, das die Seite noch überarbeitet werden muss. Ich habe mir einfach ein frei verfügbares Bild aus dem Internet geschnappt und eingebaut. In der Praxis sollten Bilder / Grafiken vor der Benutzung in Größe und Auflösung angepasst werden. Das ist Grundlagenwissen und gehört zu den normalen Fleißaufgaben beim Erstellen von Webseiten.

2. Zeig mal des Hintergrundbild.

Ich hatte dich um die Hintergrundgrafik gebeten, die hast du mir nicht zur Verfügung gestellt.

Du musst dir also deine Grafik schnappen, mit einem Bildbearbeitungsprogramm entsprechend anpassen, einfügen und das CSS entsprechend anpassen. Dann wird nichts mehr verzerrt.

Ich habe mit den von dir zur Verfügung gestellten Informationen eine funktionierende Lösung mit aktuellem HMTL5 / CSS3 erstellt. Ich fange jetzt nicht an Stück für Stück weitere Sonderwünsche einzuarbeiten. Dann musst du einen Webseitenersteller beauftragen und bezahlen.

Gruss

MrMurphy

 

[hoemknoebi]

Entschuldige der Server auf dem Diese Webseitegehostet ist meldete ein Error wegen zu grosser Datenmenge und dan habe ich vergessen es auf Google drive oder so zu stellen.

 

[nookie]

Erstens mal begreiffe ich irgendwie al diese css befehle nicht ganz.(Das liegt aber an mir und muss ich mit Kolleg Google herausfinden.)
Aber ich begreiffe nicht wieso das sich das Bild noch verzieht.

Wie schon gesagt, musst du dein Bild auch vorher anpassen. Wie willst du denn z.B. ein 500x500px Bild auf 1024x768px ohne Verzerrung komplett darstellen?

 

[hoemknoebi]

Ich dachte die 1024 könnten auf 500 herunterskaliert werdern und die 768 parallel das das Seiten verhältnis gleich bleibt und sich dan der Rest der Website automatisch anpasst. Aber das geht ja irgendwie nicht.

 

[MrMurphy]

Hallo,

an der Bildschirm-/Fenstergröße deiner Besucher kannst du nichts ändern. Damit musst du leben.

Deshalb sollten eigentlich nicht erforderliche Hintergrundbilder schon so gewählt werden, das es vollkommen egal ist, ob sie in der Ansicht beschnitten werden oder nicht.

Gruss

MrMurphy

 

[hoemknoebi]

@MrMurphy hast du mir vielleicht ein Artikel uder Tutorial oder so wo ich lernen kann was all dieser Code den du im css geschrieben hast bedeutet

 

[MrMurphy]

Hallo,

leider nicht. Dazu musst du schon Bücher wie "Little Boxes" (die 2015 überarbeitete Version, nicht die älteren) und "Flexible Boxes" kaufen. Es gibt natürlich auch andere, aber die kenne ich nicht.

Im Internet finden sich die Informationen zwar auch zu hauf, aber entweder beschreibt der Autor nur die Teile, die er selbst versteht oder es handelt sich mehr oder weniger um Lexika, die zwar viele Infos enthalten, aber nicht als les- und lernbarer Text gestaltet sind.

Vielleicht kennen aber noch andere User empfehlenswerte Seiten oder Bücher.

Gruss

MrMurphy

 

[hoemknoebi]

Ok mercy trotzdem ich werde mal schauen ob ich mir diese Bücher zulege.

 

[hoemknoebi]

Ich stelle mir noch die Frage wie die Webdesigner es bewerkstelligen das ein und die selbe Seite Teilweis von einem mobilen Device nicht gleich angezeigt wird als von einem PC.

 

[nookie]

http://getbootstrap.com/