Body Grafik

[Pina]

Hallo,
ich habe mal eine Frage: Kann man eine Body-grafik einbauen die sich je nach Fenstergröße verändert? Also bei Vollbild das Fester füllt und bei einem kleineren fester proportional verkleinert wird?

Danke und Gruß

[suit]

ich habe mal eine Frage: Kann man eine Body-grafik einbauen die sich je nach Fenstergröße verändert? Also bei Vollbild das Fester füllt und bei einem kleineren fester proportional verkleinert wird?

sich skalierende hintergrundbilder sind erst mit css 3 möglich - also prinzipiell "nein"

allerdings kannnst du hinter der seite absolut eine grafik reinpositionieren der breite und höhe du in relativen angaben machst

aber glaube mir, du willst nicht wissen, wie deine grafik bei mir zuhause auf 3360x1050 bzw 1050x1680 aussieht

[Nyanyanya]

ich habe mal eine Frage: Kann man eine Body-grafik einbauen die sich je nach Fenstergröße verändert? Also bei Vollbild das Fester füllt und bei einem kleineren fester proportional verkleinert wird?

sich skalierende hintergrundbilder sind erst mit css 3 möglich - also prinzipiell "nein"

allerdings kannnst du hinter der seite absolut eine grafik reinpositionieren der breite und höhe du in relativen angaben machst

aber glaube mir, du willst nicht wissen, wie deine grafik bei mir zuhause auf 3360x1050 bzw 1050x1680 aussieht

Vielleicht ist es nur ein Farbübergang und es sieht unverändert aus? ...
Nicht immer alles gleich so negativ sehen. Mann o Frau.

[suit]

Vielleicht ist es nur ein Farbübergang und es sieht unverändert aus? ...

wenn du einen farbverlauf mit sagen wir 800x600 px hast, musst du bei vollständiger ausnutzung der horizontale 800 farbtöne verwenden, das ist etwas wenig - besonders wenn man das ganze zb auf 1600x1200 oder noch größer streckt  - die skalierung in browsern ist schlecht, "algorithmen gibts keine" - da wird einfach linear skaliert un da sieht auch ein farbverlauf schnell mal uncool aus ;) damit bei derart kleinen farbpaletten ein verlauf noch gut aussieht, wird gedithert (der verlauf ist also eigentlich linear) darum kann man ihn eben leider auch nicht linear skalieren

Nicht immer alles gleich so negativ sehen. Mann o Frau.

nein, ich bin realistisch - du kannst es gerne versuchen, aber glaube einem alten mann :D

[Gunnar Bittersmann]

@@suit:

da sieht auch ein farbverlauf schnell mal uncool aus

Irgendwie unverständlich, warum CSS die Grafikformate für Hintergrundbilder dermaßen einschränkt und kein SVG zulässt.

Live long and prosper,
Gunnar

[suit]

Irgendwie unverständlich, warum CSS die Grafikformate für Hintergrundbilder dermaßen einschränkt und kein SVG zulässt.

vielleicht liegts daran, dass svg ascii/ansi ist und die anderen "erlaubten" formate alle binärtauglich sind - aber vektorgrafiken als hintergrundbilder wären toll - und skalierbar sollten sie auch sein, aber bis css 3 unterstützt wird, ist 2018 und wir sind alle alt und grau

[Antipitch]

Hi Nyanyanya,

Vielleicht ist es nur ein Farbübergang und es sieht unverändert aus? ...

Warum sollte ich einen Farbverlauf skalieren? Wie das Wort schon fast impliziert, lasse ich den auf den Hintergrund auslaufen und wiederhole ihn in der anderen Richtung. Elliptische (oder anders geformte) Verläufe bringen bei Skalierung das von suit beschrieben Problem mit sich.

@Pina

Eine Alternative für dich wäre vielleicht, eine sehr große Grafik zu nehmen, diese NICHT zu skalieren und per overflow-x: hidden horizontales scrollen bei kleinen Auflösungen zu verhindern (allerdings Problem im Opera, wenn ich mich recht entsinne).

Die Grafik sollte dann entweder wirklich sehr groß sein oder für hohe Auflösungen durch Formen oder Transparenz dezent auf den Hintergrund auslaufen. Ist zwar bißchen Spielkram, aber mit transparenten PNGs z.B. kann man da ganz schicke Sachen machen (ungefähr in diese Richtung http://www.100besteschriften.de/).

cheers
Antipitch

[ChrisB]

Hi,

Eine Alternative für dich wäre vielleicht, eine sehr große Grafik zu nehmen, diese NICHT zu skalieren und per overflow-x: hidden horizontales scrollen bei kleinen Auflösungen zu verhindern (allerdings Problem im Opera, wenn ich mich recht entsinne).

Dann kann man aber auch gleich wieder zum Hintergrundbild greifen, und muss nicht am Scrolling herumpfuschen ...

MfG ChrisB

[Antipitch]

Hi Chris,

Dann kann man aber auch gleich wieder zum Hintergrundbild greifen, und muss nicht am Scrolling herumpfuschen ...

solange nicht noch andere übergroße Elemente/ Überlagerungen im Spiel sind: ja. Aber nach denen war ja auch nicht gefragt (war ich schon wieder'n Schritt zu weit :-).

Vertikales zentrieren des body bg geht allerdings außer in IE's nur mit attachment:fixed. Aber das ist ja auch einigermaßen sinnvoll...

cheers
Antipitch

[Gunnar Bittersmann]

@@Pina:

Kann man eine Body-grafik einbauen die sich je nach Fenstergröße verändert? Also bei Vollbild das Fester füllt und bei einem kleineren fester proportional verkleinert wird?

Hintergrundbilder lassen sich mit CSS 2 nicht skalieren.

Ein (etwas unschöner) Workaround wäre, das Bild als Inhalt einzubinden:

<!DOCTYPE html  
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  

>  

<html  
 xmlns="http://www.w3.org/1999/xhtml"  
 xml:lang="und" lang="und"  

>  

 <head>  
  <title>TEST</title>  
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
  <style type="text/css">  
[code lang=css]html, body  
{  
 margin: 0;  
 padding: 0;  
}  
  
#bgImg  
{  
 position: absolute;  
 width: 100%;  
 height: 100%;  
}  
  
#content  
{  
 position: absolute;  
 padding: 2em;  
}

</style>
 </head>

<body>
  <img id="bgImg" src="TEST.gif" alt="" />
  <div id="content">
   <h1>Lorem ipsum</h1>
   <p>Lorem ipsum dolor sit amet.</p>
  </div>
 </body>
</html>[/code]

Live long and prosper,
Gunnar

[Pina]

@@Pina:

Kann man eine Body-grafik einbauen die sich je nach Fenstergröße verändert? Also bei Vollbild das Fester füllt und bei einem kleineren fester proportional verkleinert wird?

Hintergrundbilder lassen sich mit CSS 2 nicht skalieren.

Ein (etwas unschöner) Workaround wäre, das Bild als Inhalt einzubinden:

[code lang=html]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

<html
xmlns="http://www.w3.org/1999/xhtml"

In HMTL habe ich das hinbekommen aber beim erstelen meiner JAVA Hilfe klappt das dann nicht mehr, scheinbar kann Java Help das nicht.
Danke Trotzdem.