Background-Image

[cs]

Hallo, hab da mal wieder ein Problem. Wie bekomme ich ein Bild als Background-Image platziert? Also wie geht das mit den Größenangaben, dass alles frei von Verzerrungen ist? Das checke ich bisher überhaupt nicht;(

mfg

[Gunnar Bittersmann]

Hello out there!

Hallo, hab da mal wieder ein Problem. Wie bekomme ich ein Bild als Background-Image platziert?

SELFHTML: <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=Hintergrundfarben und -bilder>

Also wie geht das mit den Größenangaben, dass alles frei von Verzerrungen ist?

Größenangaben bei Hintergrundbildern?

See ya up the road,
Gunnar

[cs]

also mein Problem ist jetzt nicht das einbinden des Bildes, sondern die zu anzupassen, das ganze mal im Screenshot:

http://img138.imageshack.us/my.php?image=prob4po.jpg

Was ist denn da verkehrt?

mfg

[Der Martin]

Moin,

http://img138.imageshack.us/my.php?image=prob4po.jpg

was will mir dieser Screenshot nun sagen? Ein interessantes Bild, ja, aber was ist daran das Problem?
Falls du jedoch -wie in deinem vorherigen Posting schon angedeutet- das Hintergrundbild skalieren willst, hast du wohl Pech. Das ist nicht möglich. Du kannst Hintergrundbilder positionieren oder auch, wenn sie kleiner sind als das Objekt, in dem sie liegen, waagrecht und/oder senkrecht wiederholen lassen. Aber die Größe lässt sich nicht festlegen.

So long,
 Martin

[cs]

Sorry erstmal..;)

Es ist also nicht möglcih ein Bild durch em oder sontigen Angaben an dem jeweiligen Fenster anzupassen?! Schade...

Danke!

mfg

[Gunnar Bittersmann]

Hello out there!

Es ist also nicht möglcih ein Bild durch em oder sontigen Angaben an dem jeweiligen Fenster anzupassen?!

Ein Bild schon.* Ein _Hintergrund_bild nicht.

See ya up the road,
Gunnar

* Anpassung an die Größe der umschließen Box natürlich nicht mit em.

[D.R.]

Hi,

ich weiß nicht, ob das die richtige Lösung ist, aber theoretisch könntest du ja auch ein normales Bild für deine Seite einfügen, das auf 100% skalieren und dann ein absolut positioniertes Div drüber packen, das ebenfalls 100% in höhe und Breite einnimmt. Das du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast ist fraglich, ob das so eine gute Idee ist.

einen schönen Sonntag noch

[Gunnar Bittersmann]

Hello out there!

ich weiß nicht, ob das die richtige Lösung ist, […]

Doppelposting! ;-)

aber theoretisch könntest du ja auch ein normales Bild für deine Seite einfügen, das auf 100% skalieren […]

Wie ich sagte:

Ein Bild schon.* Ein _Hintergrund_bild nicht.

und dann ein absolut positioniertes Div drüber packen, das ebenfalls 100% in höhe und Breite einnimmt.

Es muss nicht absolut positioniert sein, relativ geht auch, nur z-index muss halt wirken. Und eine Größenangabe ist auch nicht erforderlich, wenn das Bild fixed positioniert ist (in Browsern, die das auch tun).

Das du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast

?? Was meinst du damit?

ist fraglich, ob das so eine gute Idee ist.

Es ist keine gute Idee, weil Browser nicht so gute Bildskalierungsalgorithmen implementiert haben wie Bildverarbeitungsprogramme, weshalb dabei keine gute Qualität herauskommt, wie Orlando schon im anderen Thread sagte.

See ya up the road,
Gunnar

[D.R.]

Es muss nicht absolut positioniert sein, relativ geht auch, nur z-index muss halt wirken. Und eine Größenangabe ist auch nicht erforderlich, wenn das Bild fixed positioniert ist (in Browsern, die das auch tun).

Wenn ich ein Bild relativ positioniere wird es lediglich verschoben, aber der Platz, wo das Bild platziert war, bleibt frei! Deshalb absolut.

Das du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast
?? Was meinst du damit?

Ich wollte schreben: Da du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast ist fraglich ob das so eine gute Idee ist.
(man sollte ja so viel wie möglich mit CSS machen!)

ist fraglich, ob das so eine gute Idee ist.

Es ist keine gute Idee, weil Browser nicht so gute Bildskalierungsalgorithmen implementiert haben wie Bildverarbeitungsprogramme, weshalb dabei keine gute Qualität herauskommt, wie Orlando schon im anderen Thread sagte.

Ja und das Außerdem. Obwohl mein Test-Bild (ist aber auch ganz schön groß) gar nicht mal so schlimm aussah. Aber natülich trifft das auch häufig zu.
Ein weiterer Nachteil ist, dass die Bildproportionen (meistens 4:3) verloren gehen, da die meisten Browser ein sehr breites "Sichtfeld" haben.

Einen schönen Montag noch!

[Gunnar Bittersmann]

Hello out there!

Wenn ich ein Bild relativ positioniere wird es lediglich verschoben, aber der Platz, wo das Bild platziert war, bleibt frei! Deshalb absolut.

Sagte ich nicht, das div relativ positionieren?

div#content {  
  position: relative;  
  z-index: 1;  
}  
img#backgroundImage {  
  position: fixed;  
  left: 0;  
  top: 0;  
  z-index: 0;  
  width: 100%;  
  height: 100%;  
}

Ich wollte schreben: Da du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast ist fraglich ob das so eine gute Idee ist.

Ich würde schreiben: _Dass_ du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast, ist fraglich. ;-) Ich sehe nicht, warum weitere Layoutangaben mit CSS kaum noch möglich sein sollten.

See ya up the road,
Gunnar

[D.R.]

Hello out there!

Wenn ich ein Bild relativ positioniere wird es lediglich verschoben, aber der Platz, wo das Bild platziert war, bleibt frei! Deshalb absolut.

Sagte ich nicht, das div relativ positionieren?

div#content {

position: relative;
  z-index: 1;
}
img#backgroundImage {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

  
Nagut, so vielleicht. So habe ich eine Webseite noch nie erstellt (mit [code]. Andererseite verstehe ich aber auch nicht, warum man den Text nicht am Fensterrand ausrichten soll, sonern im Verhältnis zum \_Hintergrundbild\_? Der Text würde doch bei einem normalen Hintergrundbild auch am Fensterrand kleben.  
  
  

> > Ich wollte schreben: Da du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast ist fraglich ob das so eine gute Idee ist.  
>   
> Ich würde schreiben: \_Dass\_ du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast, ist fraglich. ;-) Ich sehe nicht, warum weitere Layoutangaben mit CSS kaum noch möglich sein sollten.  
  
Nagut, aber ein einheitliches Hintergrundbild ist zumindest nicht möglicher (also per CSS).  
  
Einen schönen Dienstag noch

[Gunnar Bittersmann]

Hello out there!

Nagut, so vielleicht.

Es geht übrigens auch völlig ohne div:

* {  
  position: relative;  
  z-index: 1;  
}  
img#backgroundImage {  
  position: fixed;  
  left: 0;  
  top: 0;  
  z-index: 0;  
  width: 100%;  
  height: 100%;  
}

http://gunnarbittersmann.de/2006/background/scaled.html

So habe ich eine Webseite noch nie erstellt (mit ~~~

.

?? [link:http://forum.de.selfhtml.org/hilfe/bedienung.htm#syntax-highlighting]

Andererseite verstehe ich aber auch nicht, warum man den Text nicht am Fensterrand ausrichten soll, sonern im Verhältnis zum Hintergrundbild?

Wird doch nirgens gemacht. [code lang=css]position: relative

  
„'z-index' […] Angewendet auf: Positionierte Elemente“ [CSS2 §9.9.1](http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.9.1%A0)  
]  
  
„Ein Element ist positioniert, wenn seine 'position'-Eigenschaft einen anderen Wert als 'static' hat.“ [CSS2 §9.3.2](http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.3.2%A0)  
  
  

> Nagut, aber ein einheitliches Hintergrundbild ist zumindest nicht möglicher (also per CSS).  
  
??  
  
See ya up the road,  
Gunnar

-- 
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)

[Gunnar Bittersmann]

Hello out there!

http://img138.imageshack.us/my.php?image=prob4po.jpg

Was ist denn da verkehrt?

Erstmal, dass du anderen die Arbeit aufbürdest, den URI in die Adressleiste des Browsers zu kopieren, anstatt http://img138.imageshack.us/my.php?image=prob4po.jpg zu verlinken. So geht das.

Die Größe von Hintergrundbildern ist fest. Du könntest es aber nicht wiederholen lassen und zentrieren.

See ya up the road,
Gunnar

[MudGuard]

Hi,

Größenangaben bei Hintergrundbildern?

Warum nicht? http://www.w3.org/TR/css3-background/#the-background-size
Nur weil's noch nicht in den Browsern implementiert ist? ;-)

cu,
Andreas