Zum Inhalt springen

Hintergrundgrafik immer am Seitenende ausrichten

PieDie

Von PieDie
in Webdesign

 Teilen

Empfohlene Beiträge

PieDie

PieDie

Geschrieben
Geschrieben

Moin,

ich versuche, eine Seite zu basteln, die ein Hinterdgrundbild an dessen Seitenende einbindet.

Es ist ein Bild, das von unten nach oben "sanft" von einem dunklen in einen helleren blau-Ton wechselt oben und mit der Hintergrundfarbe der Seite nahtlos abschließt.

Das Porblem ist nun, dass ich das Hintergrundbild nicht dazu überredet bekommen, sich IMMER, egal wie groß oder klein die Seite ist, am Seitenende, und mit dem Browserfenster bündig abschließend, am Boden einzuordnen.

Ich kriege es nur an den Boden der Seite an sich. Die Seite ist "kürzer" als das Browserfenster und daher lugt die Hintergrundfarbe unter dem Bild hervor.

Ich "mal" das mal auf, hoffentlich erkennt man was...

_________________________________

Browsertitelleiste

_________________________[-][O][X]

|

|

|

|

|Hintergrundfarbe (Seite)

|hellblau (Bild)

|mittelblau (Bild)

|dunkelblau (Bild)

|hintergrundfarbe (Seite)

|________________________________

Hoffentlich versteht das einer :beagolisc

Das untere "hitnergrundfarbe (Seite)" ist unerwünscht. Dort soll sich das Bild platzieren.

Gibts eine CSS oder HTML Eigenschaft oder Anweisung , die bei einer Seite, die kleiner als das Browserfenster ist, den ungenutzten Platz ausfüllt, und damit das Bild an den unteren Rand zwingt?

Versucht hab ich schon span, div, table und andere abenteuerliche Sachen, aber nichts hat geholfen. Vielleicht hab ich einfach nur was falsch gemacht :(

Danke im Voraus

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
dvielleicht die seite größer machen?

alles in nen div und style="height:100%"

Es gibt kein height: 100% :rolleyes:

Ich würde folgendes machen (ohne es selbst getestet zu haben):



<body style="background-image: url(bla/bla.jpg); 

  background-repeat: no-repeat; 

  background-position: bottom;

  background-color: #FF0000;">


...


</body>

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
KLappt leider nicht.

Natürlich klappt das:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>BG-Test</title>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">


</head>

<body style="background-color: #FFFFFF;

  background-image: url(irgend/was.gif);

  background-repeat: no-repeat;

  background-position: bottom right;">


  <div style="height: 500px;">Bla</div><div>Blubb</div>

    </body>


</html>

(ohne das right ist das Bild in der Mitte unten)

Seitenende != Browserende (siehe height: 100%).

Nur im IE (7 hier) ist das Bild auch im Browser ganz unten. Opera und FF machen es aber "richtig" und es ist am Seitenende (Ende des Inhalts).

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...