Wann Graphik als img, wann als background im css

[Corraggiouno]

hallo,

ich habe festgestellt, dass in Webseiten einmal Graphiken als img im html, aber auch als background im css definiert werden.
Welche Option ist die richtige bzw. in welcher Situation entscheidet man sich für die eine bzw. für die andere Alternative?
Ich habe zum Beispiel eine Graphik mit Schlagschatten. Die hat 280 x 400 px.

Kann mir da jemand einen Tipp geben?

 

[thuemmy]

Eine genaue Aussage kann ich da sicher auch nicht treffen. Aber ich würde sagen, Bilder die zum Inhalt gehören, die würde ich als img auszeichnen, da hast Du dann auch die Möglichkeit, das alt- bzw. title-Attribut zu setzen, und Graphiken, die lediglich zum Design der Seite gehören, die würde ich dann als background im css einbinden.

 

[Zejo]

Wenn du Englisch kannst, hier eine gute Erklärung:

html - When to use IMG vs. CSS background-image? - Stack Overflow

 

[Corraggiouno]

Ok, das mit Inhalt und Design sehe ich auch so wir ihr. Was ich auch noch gerne erfahren würde ist, wann eigentlich die einheiten em, px bzw. % eingesetzt werden.
Ems werden ja primär für eleastisches Layout eingesetzt. Wenn ich aber eine Graphik als Hintergrundgraphik (für das Layout) definiere sollte doch diese schon in px angegeben werden, oder?
Wie sind eure Erfahrungen?

 

[Zejo]

1. % verwendet man, wenn sich die Größe am Browserfenster orientieren soll.

2. em verwendet man, wenn sich die Größe an der Schriftgröße orientieren soll.

 

[Banana_Jones]

1. % verwendet man, wenn sich die Größe am Browserfenster orientieren soll.

Ich würde das gerne konkretisieren und sagen: "Wenn sich die Größe am umgebenden Element orientieren soll", was natürlich in letzter Instanz dann das Browserfenster ist

 

[Corraggiouno]

danke für eure Tipps; kann mir vielleicht noch jemand einen Rat bzw. Verbesserungsvorschlag geben, wie ich die Position hinsichtlich der Graphik neben der Navigation verbessern kann?
http://es.dyntec.de/index.php
Und zwar, wenn die Schriftgröße im Browser vergrößert wird, dann entsteht ein Absatz zwischen Graphik und dem Inhaltsbereich.

 

[threadi]

Deine Beschreibung mit dem Zoom betrifft aber nur den Textzoom. Soll die Grafik mit der Farbfläche unten links ein Kreuz bilden? Dann könntest Du es mit einem prozentualen Abstand nach oben vom Bild probieren. Oder Du machst #slider per "display: table;" zu einem Tabellenelement und kannst dann das Bild mit "vertical-align: bottom;" nach unten ausrichten.

 

[Corraggiouno]

Soll die Grafik mit der Farbfläche unten links ein Kreuz bilden? Dann könntest Du es mit einem prozentualen Abstand nach oben vom Bild probieren.

Hi threadi, meinst du es so?

div#slider img
{
display: block;
width: 100%;
margin-top: 20%;
}

Elektro Schmid -

 

[threadi]

Ja, klappt aber scheinbar nicht bei sehr großem Zoom. Vlt. wäre die 2. Variante doch besser.

 

[Corraggiouno]

hab mal den code wie folgt geändert (also die 2. Variante, die du mir vorgeschlagen hast)

div#slider
{
float:left;
display: table;
}

div#slider img
{
display: block;
width: 100%;
vertical-align: bottom;
}

Leider brachte auch diese Variante bei der Änderung der Schriftgröße im Browser keinen Erfolg
Hab ich da vielleicht aus deiner Sicht, was falsches definiert?

 

[threadi]

Mmh, ne, alles richtig. Nur wundert mich das jetzt auch etwas, sorry :|

 

[Corraggiouno]

ich habe jetzt mal meiner graphik im css - code eine zusätzliche höhe und breite gegeben:

div#slider img
{
display: block;
width: 33em;
height: 14.2em;
}

perfekt ist das leider immer noch nicht; wenn ich die Schriftgröße im Browser verkleinere dann rutscht die Graphik unter die Navigation

 

[Corraggiouno]

hallo zusammen,
leider konnte ich das Problem mit Textzoom noch nicht aus der Welt schaffen; hat von euch vielleicht jemand noch eine Idee - wie man das Layout so anpassen kann, dass beim Verkleinern und Vergrößern der Schriftgröße im Browser keine Lücken und kein Verschieben der Boxen ensteht.
Elektro Schmid -

 

[djheke]

Daran ist dein margin-left:5.5em schuld. Du kannst diesen Wert mal in 80px ändern. So bleibt es immer ein Kreuz.

 

[Corraggiouno]

Daran ist dein margin-left:5.5em schuld. Du kannst diesen Wert mal in 80px ändern. So bleibt es immer ein Kreuz.

mmh, leider nicht - wenn ich, wie du sagst 80 px definiere, also bei meiner navigation und ich die schriftgröße im browser verkleinere also au ca 12, dann schiebt sich die graphik unter die navigation
http://es.dyntec.de/index.php

 

[djheke]

Das Problem hast du auch ohne diese Änderung. Wenn du das nicht möchtest, dann musst du deiner Navi und deiner Sidebar ebenfalls eine Breite in em zuweisen.

 

[Corraggiouno]

danke, das hat mich schon ein ganzes Stück weitergebracht; hast du mir noch einen Tipp was ich an meinem Code verbessern könnte, damit die Border der Navigation bei Vergrößerung der Schriftgröße nicht herausragen? Die Hintergrundgraphik ist ein Verlauf und hat eine Breite von 200px.
Bei Verkleinerung der Schriftgrößere entsteht ein Abstand zwischen Bild und #maintext

 

[Corraggiouno]

Beim Textzoom, wie ich ja bereits erwähnt habe, ragen die Border der Navigation bei Vergrößerung der Schriftgröße im Browser über den Background der Navigation.
Liegt es daran, dass der Background eine feste Breite hat?
siehe Anlage...............