Anfängerproblem Hintergrundbild CSS

[BenUtzer]

Hallo zusammen,

ich hab ein kleines Anfängerproblem. Ich lerne gerade autodidaktisch XHTML & CSS. Nachdem ich ein ganz nettes Layout des .html-Dokumentes via CSS hinbekommen habe, stellt sich mir die blöde Frage, wie ich ein .jpg, welches ich auf die Größe des Headers zugeschnitten und im gleichen Folder abgelegt habe wie die index-Datei, als Hintergrundbild in den Header einfügen kann.

Ich bekomm den Link-Verweis auf den entsprechenden lokalen Ordner im Quelltext irgendwie nicht hin.

Wäre nett, wenn mir jemand weiterhelfen könnte.

Schöne Grüße und danke im Voraus

Ben :-D

 

[msx3000]

Hast Du im HTML ein DIV für deinen Header angelegt?

Beispiel:
<div id="header"></div>

besagtes DIV sprichst Du dann über CSS an und gibst ihm Werte wie Höhe, Breite und hinterlegst dein Bild als Hintergrund.

Beispiel:
#header {heightoopx; widthoopx; background:url("dateiname.jpg") no-repeat;}

schönen Gruß

Matthias

 

[BenUtzer]

Hi Matthias, erstmal herzlichen Dank für deine Hilfe.

Genau, ich hab ein Div angelegt, so wie du es oben beschrieben hast. Größe etc. hab ich auch alles. Passt, wackelt und hat Luft.

Ich hab nur ein Problem hiermit: background:url("dateiname.jpg") no-repeat;

Alles innerhalb der "", sprich der Pfad, wie muss ich den anlegen wenn, die Ordnerstruktur z.Bsp. Festplatte/Ordner/Unterordner/bild.jpg auf einer lokalen Festplatte ist?

 

[msx3000]

liegt deine HTML und CSS Datei im gleichen Ordner? Falls die CSS-Datei in einem eigenen Ordner liegt musst Du eine Ebene zurückgehen, dass macht man mit: ../dateiname.jpg
das musste dann so geschrieben werden

background:url("../dateiname.jpg") no-repeat;

Ich habe meine HTML und CSS Dateien immer auf einer Ebene und Bilder in einem Ordner namens "pix". sieht dann so aus:

background:url("pix/dateiname.jpg") no-repeat;

schönen Gruß
Matthias

 

[BenUtzer]

Insgesamt sieht es im Stylesheet so aus:

#header {
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background-image: url("../headerr.jpg") no-repeat;
}

Ich seh das Hintergrundbild einfach nicht!

 

[bloodworks]

versuch mal den Bild Link absolut anzugeben also "http://deinedomain.de/Bilderordner/Andererbilderordner/Bildname.jpg"

Das ist übrings immer zu empfehlen, auch wenn du mal den File verschiebst dann bleibt das Bild da.

 

[Alferd]

background-image: url("../headerr.jpg") no-repeat;

sollte es nicht background:url("../headerr.jpg") no-repeat; heissen?

 

[BenUtzer]

versuch mal den Bild Link absolut anzugeben also "http://deinedomain.de/Bilderordner/Andererbilderordner/Bildname.jpg"

Nett gemeint, aber ich sag ja, das Bild liegt lokal auf der Festplatte. Ich bastel hier nur etwas rum und hab noch keine Serveranbindung.

 

[bloodworks]

Aso sry ja dann musts du den kompletten Pfand angeben (wenn dein delivery system kannn) oder das Bild relativ zum html File legen (gleicher Ordner oder dierekt drunter)

 

[Peter Maurer]

sollte es nicht background:url("../headerr.jpg") no-repeat; heissen?

Nein.

Wo liegt denn das Hintergrundbild, BenUtzer? Tatsaechlich eine Ordnerhierarchie weiter oben im Vergleich zu Deiner HTML-Datei?

 

[BenUtzer]

sollte es nicht background:url("../headerr.jpg") no-repeat; heissen?

Hab ich so übernommen, aber es tut sich trotzdem nichts.

Gibt es dabei eine Reihenfolge, in der die einzelnen Selektoren stehen müssen?

 

[BenUtzer]

Nein.

Wo liegt denn das Hintergrundbild, BenUtzer? Tatsaechlich eine Ordnerhierarchie weiter oben im Vergleich zu Deiner HTML-Datei?

Oha, Peter "the Mighty" Maurer

Das Bild liegt mit der index.html im gleichen Ordner.

 

[BenUtzer]

Danke an alle!

Aus ("../headerr.jpg") hab ich ("headerr.jpg") gemacht, und schon läufts !

 

[msx3000]

Danke an alle!

Aus ("../headerr.jpg") hab ich ("headerr.jpg") gemacht, und schon läufts !

schön! viel Spaß noch beim lernen.

Kennst Du schon die üblichen Verdächtigen:
CSS4You
SelfHtml
?

viele Grüße

Matthias

 

[BenUtzer]

Klar, ich hätte da noch http://www.alvit.de/handbook/ anzubieten, das ist der ultimative Tipp für jeden, der sich etwas mit der Materie beschäftigt.

 

[msx3000]

Klar, ich hätte da noch http://www.alvit.de/handbook/ anzubieten, das ist der ultimative Tipp für jeden, der sich etwas mit der Materie beschäftigt.

Etwas? Der absolute Overkill an Websites:-D

 

[BenUtzer]

Etwas? Der absolute Overkill an Websites:-D

Sicherlich, aber wenn du mal echt konzentriert draufschaust, wirst du sehen dass das ausnahmslos qualifizierte Links sind! Sei es zum Thema Farbe, zu irgendwelchen CSS-Techniken, einfach alles...