Hintergrundbild

Hallo,
ich verzweifel.
Ich habe auf meiner Homepage ein DIV-Layer, welches ein Hintergrundbild per CSS bekommt. Aber das Bild wird nicht angezeigt.
Gehe ich hin und nutze im FireFox das Developer-Tool zum editieren von CSS, dann wird mir auch das Image angezeigt. Weiß jemand rat?

Seite:
http://www.vfb-alemannia-pfalzdorf.de/prev01/

CSS:
http://www.vfb-alemannia-pfalzdorf.de/prev01/library…

Bild:
http://www.vfb-alemannia-pfalzdorf.de/prev01/library…

Der betroffene Teil ist der

Danke für Hilfe

Gruß

Marcel

Hallo,

ich weiss, dass das jetzt nicht deine Frage beantwortet, aber diese Bild würde ich nicht im Hintergrund sondern ganz normal mit einbinden.

Grüße,
Moritz

Hallo Marcel!

„Marcel Schenke“ schrieb:

ich verzweifel.

wird schon werden :wink:

Ich habe auf meiner Homepage ein DIV-Layer, welches ein
Hintergrundbild per CSS bekommt. Aber das Bild wird nicht
angezeigt.
Gehe ich hin und nutze im FireFox das Developer-Tool zum
editieren von CSS, dann wird mir auch das Image angezeigt.
Weiß jemand rat?

Seite:
http://www.vfb-alemannia-pfalzdorf.de/prev01/

CSS:
http://www.vfb-alemannia-pfalzdorf.de/prev01/library…

Bild:
http://www.vfb-alemannia-pfalzdorf.de/prev01/library…

Der betroffene Teil ist der

Ersetze mal in der Datei „index.php“:
MEDIA=„screen“ HREF="./library/css/index.css.php">
durch:

und in der Datei „index.css.php“:
background-image:url(./library/graph/banner.jpg);
durch:
background:url(http://www.vfb-alemannia-pfalzdorf.de/prev01/library…); background-color: #blue;

Die „background-color:“ musst Du noch anpassen.

Anbei noch ein paar Anregungen:

Zu:
* { font-family:verdana; } body { margin:0px; scroll:auto; }

Lies bitte:
http://forum.de.selfhtml.org/archiv/2003/7/t51281/

Setze einen „Doctype“ ein.

Du missbrauchst Tabellen zur Erstellung des Layouts.
Tabellen sollten nur zur Darstellung tabellarischer Daten dienen.

Gruss Oliver

Moin Moritz,
*g* richtig, ist nicht grad die Lösung die ich hören wollte, aber hab mit so einer Antwort gerechnet.

aber
diese Bild würde ich nicht im Hintergrund sondern ganz normal
mit einbinden.

Warum? ausser das damit mein Problem auch gelöst wäre. Gibt es einen Grund, das es sinnvoller ist das -Tag zu nutzen statt das Bild als Hintergrund einzufügen?
Andersrum gibt es sicherlich auch keinen Grund, es sei denn ich möchte noch Text über das Bild legen, daher habe ich auch derzeit eine Einbindung als Hintergrund gewählt.

Gruß und danke für deinen Beitrag

Marcel

[erledigt] so gehts!
Moin Oliver,

wird schon werden :wink:

Recht hast du.

Welchen unterschied macht es, ob ich schreibe ./library oder nur library? Hat das eine Auswirkung?

background:url(http://www.vfb-alemannia-pfalzdorf.de/prev01/library…);
background-color: #blue;

Wo ist hier der Unterschied, wieso klappt die Geschichte bei absoluten Dateipfaden, aber nicht bei relativen? Und warum klappts mit dem relativen Pfad wenn ich im FireFox das CSS-editiere?

Allgemein zu deinen Anregungen:
Vielen dank für die Infos, aber die Seite befindet sich noch im Entwurf,
daher sind einige Styles nur nebenbei eingebaut um einige Effekte zu testen und somit ist da sicherlich noch einiges nicht ganz richtig.
Der Feinschliff kommt später.

Du missbrauchst Tabellen zur Erstellung des Layouts.
Tabellen sollten nur zur Darstellung tabellarischer Daten
dienen.

Richtig, ist mir bekannt, aber leider bin ich sonst nicht in der Lage die Elemente zentral auf der Seite zu positionieren. Habe schon einiges versucht, aber leider ohne Erfolg, daher hab ich mich vorab für die Tabelle entschieden. Wenn ich ne andere Lösung habe wird diese selbstverständlich eingesetzt.

Vielen Dank für deine ausführliche Hilfe und die Tipps.
So funktiniert es zumindest mit dem Hintergrundbild, wenn auch für mich ein wenig schleierhaft…

Gruß

Marcel

Hallo,

aber
diese Bild würde ich nicht im Hintergrund sondern ganz normal
mit einbinden.

Warum? ausser das damit mein Problem auch gelöst wäre. Gibt es
einen Grund, das es sinnvoller ist das -Tag zu
nutzen statt das Bild als Hintergrund einzufügen?

Ja. Er nennt sich „least surprise“ oder so.
Das -Tag ist dafür gedacht, Bilder einzubinden, Hintergrund ist für den Hintergrund gedacht. Wenn jetzt jemand z.B. alle Hintergrundbilder blockt, dann ist dieses Bild auch weg.
Es gibt noch andere Gründe, z.B. Barrierefreiheit. Du hast die Möglichkeit (und solltest sie nutzen), den Bildern mit dem alt-Tag textuelle Beschreibungen zu geben. Das ist AFAIK bei Hintergrundbildern nicht der Fall.

Grüße,
Moritz

Hallo Marcel!

„Marcel Schenke“ schrieb:

wird schon werden :wink:

Recht hast du.

Na bitte.

Welchen unterschied macht es, ob ich schreibe ./library oder
nur library? Hat das eine Auswirkung?

Bestimmte Browser sind da etwas eigentümlich, insbesondere CSS
betreffend.

background:url(http://www.vfb-alemannia-pfalzdorf.de/prev01/library…);
background-color: #blue;

Wo ist hier der Unterschied, wieso klappt die Geschichte bei
absoluten Dateipfaden, aber nicht bei relativen? Und warum
klappts mit dem relativen Pfad wenn ich im FireFox das
CSS-editiere?

Relative Pfadangabe: erfolgt in Bezug auf den Speicherort der Datei,
von der die Seite verlinkt ist.
Beispiel: ‚library/graph/banner.jpg‘

Absoluten Pfadangabe: der gesamte Verzeichnispfad der Datei wird
auf das Wurzelverzeichnis (root) des Dateisystems bezogen angegeben.
Unter LINUX/UNIX-Systemen ist das ‚/‘ unter Windows ‚C:‘.
Beispiel: ‚/home/www/ww4432/html/ref/index.php‘.

Lies bitte auch:
http://jendryschik.de/wsdev/einfuehrung/xhtml/verweise
Relative und absolute Verweise

Bei:
background:url(http://www.vfb-alemannia-pfalzdorf.de/prev01/library…);
wird jedoch nicht ein relativer oder absoluter Pfad aufgerufen,
sondern eben eine URL: http://www.symweb.de/glossar/url__121.htm

Allgemein zu deinen Anregungen:
Vielen dank für die Infos, aber die Seite befindet sich noch
im Entwurf,
daher sind einige Styles nur nebenbei eingebaut um einige
Effekte zu testen und somit ist da sicherlich noch einiges
nicht ganz richtig.
Der Feinschliff kommt später.

OK. :wink:

Vielen Dank für deine ausführliche Hilfe und die Tipps.
So funktiniert es zumindest mit dem Hintergrundbild, wenn auch
für mich ein wenig schleierhaft…

Ich hoffe, es wurde jetzt etwas klarer.

Gruss Oliver

1 Like

Moin Moritz,

Es gibt noch andere Gründe, z.B. Barrierefreiheit. Du hast die
Möglichkeit (und solltest sie nutzen), den Bildern mit dem
alt-Tag textuelle Beschreibungen zu geben. Das ist AFAIK bei
Hintergrundbildern nicht der Fall.

jupp, das leuchtet mir ein. soweit hatte ich nicht gedacht.
Danke und Grüße,
Marcel

Moin Oliver,
danke,
aber den unterschied zw. relativ und absolut kannte ich, mich wundert nur das ne absolute angabe, bzw. die Komplette URL funktioniert, aber die relative Angabe nicht? Hat sonst eigentlich immer geklappt.
Egal, Hauptsache es funzt.

Gruß

Marcel