HTML Hintergrundbild rechts ausrichten

AspeX · 6. Dezember 2009

Hallo,

ich verstehe ums verrecken nicht wie man so einen Hintergrundbild rechts ausrichten kann wie auf www.wow-europe.com
Der Typ links mit dem Schwert ist bei einer großen Auflösung sichtbar, wenn man das Fenster verkleinert verschwindet er nach links aus dem Fenster. Der Content bleibt dabei immer in der Mitte zentriert.
Wie kriegt man sowas hin???

Wenn ich das wie folgt löse:

HTML:

<td width="33%" align="right" valign="top" background="layoutimages/bg_left.jpg">

... ist das Bild immernoch linksbündig und verschwindet auch nicht links aus dem Bildschirm sondern wird rechts durch meinen Content abgeschnitten / überdeckt wenn ich das Fenster verkleinere.

Bitte um Hilfe.

ZooLxp · 6. Dezember 2009

das macht man am besten mit css ( bin mir nicht sicher ob das überhaupt mit html geht )
body { background: url("/images/hintergrund.jpg") right top fixed no-repeat;}

AspeX · 6. Dezember 2009

Hi,

also mein Code sieht jetzt so aus:

<style type="text/css">
body {
background: url('/layoutimages/bg_left.jpg') right middle fixed no-repeat;
background: url('/layoutimages/bg_right.jpg') left middle fixed no-repeat;
}
</style>

background: << wird wohl nicht 2x gehen, ne? Ich werde wohl 1 Bild daraus machen und den dann zentrieren ...

Das bedeutet aber dass die Bilder komplett im Hintergrund gelegt sind, ich muss sie also später im Code nicht wieder aufrufen?

Im Moment tut sich im Hintergrund noch garnichts.

DjMG · 6. Dezember 2009

So dürfte es funktionieren:

Code:

<style type="text/css">
body {
background-image: url(/layoutimages/bg_left.jpg) right middle fixed no-repeat;
background-image: url(/layoutimages/bg_right.jpg) left middle fixed no-repeat;
}
</style>

lg Uli

AspeX · 6. Dezember 2009

hm... leider nicht

Mr. Snoot · 6. Dezember 2009

Ich hab letztens auch mit was ähnliches gespielt und musste dabei folgendes angeben, damit es wirklich in jedem Browser korrekt angezeigt wird:

PHP:

background-image:url(...);
background-repeat:no-repeat;
background-position:right;

Also nicht in der Kurzform:

PHP:

background-image:url(...) no-repeat right;

Wenn du zwei Bilder angibst, überschreibst ja die zweite Anweisung die erste.

AspeX · 6. Dezember 2009

mhhm ok danke werde ich ausprobieren

QXARE · 6. Dezember 2009

So wie ZooLxp es geschrieben hat sollte es eigentlich funktionieren.

HTML:

<style type="text/css">
body {
    background: url("layoutimages/bg_left.jpg") right top fixed no-repeat;
}
</style>

@Mr. Snoot:
Du verwechselst background-image mit background was sehrwohl in allen gängigen Browsern funktioniert.

Mr. Snoot · 6. Dezember 2009

Aah, jetzt, ja

Okay, mein Fehler

AspeX · 9. Dezember 2009

Der Hintergrund wiederholt sich trotzdem ..

Und wenn ich das ganze jetzt einmal mittig zentriert haben möchte? vertikal: mitte, horizontal: mitte, no-repeat

Mr. Snoot · 9. Dezember 2009

Das müsstest du dann so angeben:

PHP:

background: url(...) center no-repeat;

AspeX · 13. Dezember 2009

Super, das klappt besser als ich gedacht hätte. Wie mache ich noch den Rest hinter dem Hintergrundbild schwarz?

bgcolor="#000000" akzeptiert er nichtmehr, es ist jetzt drumherum weiß.

Mr. Snoot · 13. Dezember 2009

Die Farbe müsstest du so angeben:

PHP:

background: url(...) center no-repeat color:#000;

oder evtl. so:

PHP:

background: url(...) center no-repeat; background-color:#000;

(#000 ist die Kurzschreibweise von #000000)

AspeX · 13. Dezember 2009

Cool danke, funzt einwandfrei

Suche

HTML Hintergrundbild rechts ausrichten

AspeX

Lieutenant

ZooLxp

Lt. Commander

AspeX

Lieutenant

DjMG

Lieutenant

AspeX

Lieutenant

Mr. Snoot

Gast

AspeX

Lieutenant

QXARE

Lt. Commander

Mr. Snoot

Gast

AspeX

Lieutenant

Mr. Snoot

Gast

AspeX

Lieutenant

Mr. Snoot

Gast

AspeX

Lieutenant

Ähnliche Themen