[HTML/CSS] div style="background-image usw funzt nicht

Londarus Trentos · 30. Juli 2007

Hi,

ich bin grade dran, eine Seite in html zu schreiben. Die Grafiken, die als background-image fungieren sollen, sind schon angfertigt.
Dann wollte ich sie mittels

HTML:

<div style="background-image:url (/images/Upperbanner.jpg)"></div>

einbinden. Allerdings bleibt das Bild weiß. Ich will sie auch nicht in den body-tag mit einbinden, da ich sie dann nicht zentrieren kann (jedenfalls mit den Befehlen mit denen ich es probiert habe.)

Weiß jemand warum es nicht geht? Ich bin eigentlich noch ein hml-n00b und versuche grade mit selfhtml.org html zu lernen. Hoffe auf Antwort...

mfG L

Cheecat · 30. Juli 2007

Londarus Trentos schrieb:
HTML:

<div style="background-image:url (/images/Upperbanner.jpg)"></div>

<div style="background-image:url(images/Upperbanner.jpg)">bla bla vla</div>

Vor images der / weg. Das div benötigt eine Größe, also schreib mal irgendwas dazwischen.

Londarus Trentos · 30. Juli 2007

Mh klappt immer noch nicht. Ich wusst jetzt nicht wo height und width hinzumachen ist. So sieht der Code jetzt aus:

HTML:

<div style="background-image:url (images/Upperbanner.jpg); height="200"; width="700">
blablabla
</div>

Cheecat · 30. Juli 2007

Londarus Trentos schrieb:
HTML:

<div style="background-image:url (images/Upperbanner.jpg); height="200"; width="700"> blablabla </div>

inkorrekt.
->

HTML:

<div style="background-image:url(images/Upperbanner.jpg); height:200; width:700;">
blablabla
</div>

Beachte: Auch das Leerzeichen zwischen url und der ( raus!

dantes_inferno · 30. Juli 2007

sauberer ist es auch, die einheiten zu den massen zu schreiben, also zB 200px, 200em, 100% etc...

Cheecat · 30. Juli 2007

dantes_inferno schrieb:
sauberer ist es auch, die einheiten zu den massen zu schreiben, also zB 200px, 200em, 100% etc...

Stimmt allerdings. Normalerweise werden die Angaben sonst ignoriert, außer bei 0, da muss keine Einheit dastehen.

Londarus Trentos · 30. Juli 2007

Negativ.

Das einzige was ich dann sehe ist blablabla

Es ist aber eigentlich unmöglich, dass es am Editor (Phase5) oder am Hoster (funpic) liegt, oder?

(Am Browser kanns net liegen. FF neuste Version und mit IE auch getestet.)

mfG L

Cheecat · 30. Juli 2007

Also, bei dir lokal funktionierts, nur wenn du es hochgeladen hast, nicht?

Londarus Trentos · 30. Juli 2007

Kann es denn überhaupt lokal gehen? Wie wird denn dann die Grafik gefunden? Muss die dann auch so geordnet sein wie in der Datenbank? (oder wie das heißt :lol

mfG L

EDIT: Okay,lokal funzt es, allerdings ist das blablabla dann nicht über der Grafik sondern... auch über der Grafik aber an der y Achse und nicht der Z Achse - sozusagen...

Also nochmal besser ausgedrückt: Die Schrift ist nicht auf der Grafik, sondern über ihr. Davon abgesehen klappts nur lokal und nicht im Web...

Tommy · 30. Juli 2007

Londarus Trentos schrieb:
Kann es denn überhaupt lokal gehen? Wie wird denn dann die Grafik gefunden? Muss die dann auch so geordnet sein wie in der Datenbank? (oder wie das heißt :lol

mfG L

EDIT: Okay,lokal funzt es, allerdings ist das blablabla dann nicht über der Grafik sondern... auch über der Grafik aber an der y Achse und nicht der Z Achse - sozusagen...

Also nochmal besser ausgedrückt: Die Schrift ist nicht auf der Grafik, sondern über ihr. Davon abgesehen klappts nur lokal und nicht im Web...

Hä? Was? Z-Achse? soll dich das aus dem Bildschirm anspringen? :lol:

Die Grafik musst du natürlich auch hochladen und zwar mit dem Ordner "images", warum bei dir der Text über der Grafik steht kann ich nicht nachvollziehen ... gemäß Cheecat's Beispielquelltext wird ne Grafik korrekt gekachelt wiedergegeben und der Text befindet sich vor der Grafik

Londarus Trentos · 30. Juli 2007

Ja, genau VOR der Grafik, so meint ichs. Also lokal klappts schon, nur halt der text nicht, aber das ist en andres Thema. Ordner images, Grafiken in images Ordner, html datei NICHT in images Ordner und alles hochgeladen --> weiß. Aber warum klappt es lokal und nicht im Netz?

Cheecat · 30. Juli 2007

Dann gib doch mal den Link zur Seite die nicht geht

.
Achso, und bei meinem Test war der Text auf der Grafik. So soll es ja auch sein. Ist ja eine Hintergrundgrafik.

Londarus Trentos · 30. Juli 2007

Muss das sein :lol:. Ich arbeite grade an nem Site-Projekt für den neuen 3D-Bereich und das sollte ja ne Überraschung sein. Wie wärs mit PN? Da kann ich dir den Link ja schicken.

Jim-Panse · 30. Juli 2007

Pass mal auf:
HTML

Code:

<div id="upperBanner"><br/></div>

CSS

Code:

#upperBanner {
background-image: url(images/Upperbanner.jpg); [I](der relative Link geht von der CSS-Datei aus, wenn du das CSS in die HTML-Datei einbindest, gehts vom HTML-Dokument aus, am besten du verwendest absolute Links)[/I]
background-position: center; [I](kannste auch in left oder right ändern, je nachdem wo dein Banner nachher im div-Tag sein soll)[/I]
background-repeat: no-repeat;
height: 200px;
width: 700px;
margin: 0;
padding: 0;
border: 1px solid #000000; [I](nur wenn du einen dünnen Rahmen willst, kannst die Farbe als Heximalzahl später in deinen gewünschte Farbe aus dem RGB-Farbraum wählen)[/I]
}

Einbinden der CSS-Datei

Code:

<link href="stylesheets/css" rel="stylesheet type="text/css" /> (ke nachdem wo deine CSS-Datei von der HTML-Datei ausgehend lokalisiert ist, muss du den Link ändern)

Hoffe das hilft dir weiter, wenns nich geht, musst du das ganze als Bild, also img-Tag, einfügen.

Londarus Trentos · 30. Juli 2007

So nun geht es endlich, danke nochmal an alle

Ich glaube die Änderung, die es dann gebracht hat, war height und width einzubinden und vor allem hinten noch ein px dranzusetzen. Hier nochmal danke an Cheecat ;-D

Und danke an Jim-Panse, bei deinen Codes kann ich mir ja was abgucken. Jedenfalls klappts jetzt.

Nur mit dem Text klappts glaub ich noch nicht. Kann aber auch sein, dass das Bild einfach nur oben noch weiter weiß ist als ich gedacht hab. Ich mach einfach noch ein paar zeilen blablabla mehr und wir werden sehen...

mfG L

EDIT: Okay, es war doch mehr weiß im Bild als ich dachte. Text ist vor der Grafik, alles klappt. Vielen Dank

Cheecat · 30. Juli 2007

Lass ihn erst mal ganz einfach anfangen.

Und bei id='idname' ist zu beachten, dass die id eindeutig sein muss. Es darf z.B. im Quelltext keine 2 oder mehr ids mit demselben Namen geben.
Dafür gibts Klassen: class='classenname' und im Stylesheet dann .classenname {...}.

Londarus Trentos · 30. Juli 2007

Verwirrt mich net, lasst mich erstmal so grundsätzliches html lernen und nicht gleich haudraufwienix ins css stürzen ^^

EDIT:

Ich missbrauch den Fred mal gleich zur nächsten Frage: Wie kann ich die background images denn zentrieren ohne

HTML:

div align="center"

zu verwenden?
Denn ansonsten ist ja alles zentriert, auch der Text. Kann ich das auch noch in den

HTML:

div style="background-image"

mit einbinden, wenn ja, wie? Oder geht das nicht in der html-Datei und brauch ich da ne CSS Datei? Bitte lasst es mich irgendwie in der html Datei hinkriegen lassen :lol:

mfG L

dantes_inferno · 30. Juli 2007

Londarus Trentos schrieb:
Verwirrt mich net, lasst mich erstmal so grundsätzliches html lernen und nicht gleich haudraufwienix ins css stürzen ^^

EDIT:

Ich missbrauch den Fred mal gleich zur nächsten Frage: Wie kann ich die background images denn zentrieren ohne

HTML:

div align="center"

zu verwenden?
Denn ansonsten ist ja alles zentriert, auch der Text. Kann ich das auch noch in den

HTML:

div style="background-image"

mit einbinden, wenn ja, wie? Oder geht das nicht in der html-Datei und brauch ich da ne CSS Datei? Bitte lasst es mich irgendwie in der html Datei hinkriegen lassen :lol:

mfG L

packe dann doch den text in ein <p style="text-align: left;"> TEXT </p>

Londarus Trentos · 30. Juli 2007

Ja, der Befehl ist mir aber zu ungenau. Ich wollte da mit Pixelarbeiten arbeiten. Kann man das vllt mit einer table regeln?

Jetzt bin ich ein Ratsherr ^^

dantes_inferno · 30. Juli 2007

bah pfui! tabellen = schlecht !! böse böse.

tabellen dienen nur zur tabellarischen darstellung von daten. nicht zu designzwecken

du kannst sehr genau mit bsp margin-left: 5px arbeiten.

wenn du zb ein rahmen auf der seite zentrieren willst (wie zb der rahmen dieses forums) kannste das machen, in dem du das alles in ein div packst, ihm eine grösse gibts (width/height) und mit margin: 0px auto; zentrierst. d.h.: 0px ist der abstand nach oben und unten, auto bedeutet, das der abstand links und rechts automatisch angepasst wird. ich glaube -bin mir gerade nicht sicher- das der ie6 damit probs hat und mal noch ein align center einbauen muss... damit der text nicht auch zentriert ist, musst du mit text-align: left arbeiten. den text selber kannste wieder in ein div packen und pixel genau positionieren.

tip: guck dir mal websites an und klaue ein bisschen css. das ist keine schande.
sehr empfehlen kann ich : css zengarden

da kann man ne menge lernen

[HTML/CSS] div style="background-image usw funzt nicht

Ehrbarer Bürger

Hausvetter

Ehrbarer Bürger

Hausvetter

Bürger

Hausvetter

Ehrbarer Bürger

Hausvetter

Ehrbarer Bürger

Hausvetter

Ehrbarer Bürger

Hausvetter

Ehrbarer Bürger

Reisender

Ehrbarer Bürger

Hausvetter

Ehrbarer Bürger

Bürger

Ehrbarer Bürger

Bürger

Ähnliche Themen