CSS Bild unten rechts

dreamcatcher · 09.02.2011, 19:39

Hallo ihr Lieben,

Es geht darum, dass ich gerne ein Bild ganz unten rechts haben möchte als Backgroundimage.

Derzeitiger Code:

Code:

body {
  background-image:url(./_img/background.jpg);
  background-position: right bottom;
  background-repeat:no-repeat;}

html {
  color:       #ffffff;
  background:  #000000;
}

Allerdings ist es in diesem Falle so, dass wenn die Seite nicht "lang genug" ist, das Image auch nur bis dahin geht wo das letzte Element der Seite ist.

In meinem Fall ist das Backgroundimage jedoch davon abhängig dass es IMMER ganz UNTEN rechts steht und nicht "in der Mitte recht".

Wie kann ich das realisieren ?

Weiß das überhaupt jemand, geht so etwas vllt. gar nicht ?

Chriz · 09.02.2011, 20:21

body { min-height:100% }

dreamcatcher · 09.02.2011, 21:57

Danke, dein Kommentar hat mich zum Ergebnis geführt.

Code:

  background-position:right bottom;
  background-repeat:no-repeat;
  color:       #ffffff;

  margin:0;
  padding:0;
  height:100%;

von html & body

nikosch · 09.02.2011, 21:59

Zitat:

height:100%;

schränkt aber die verfügbare Höhe ein. Außer im alten IE, da wirkt es wie min-height.

dreamcatcher · 09.02.2011, 22:24

Das Problem ist, wenn ich min-height eingebe dann wird der Footer 2 x angezeigt.

Einmal dort wo der Content aufhört vom Body und einmal ganz unten.

So sieht dann der "fehlerhafte" Code aus:

Code:

html, body {
  background:  #000000;
  background-image:url(./abc.jpg);
  background-position:right bottom;
  background-repeat:no-repeat;

  margin:0;
  padding:0;
  min-height:100%;
}

div#footer {
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	background:#ddd;
	border-top:6px double gray;
}

Chriz · 09.02.2011, 22:28

Im "html" haben die Angaben eigentlich nichts zu suchen.

nikosch · 09.02.2011, 22:50

Yo, kein Wunder also.

dreamcatcher · 09.02.2011, 23:06

Wenn ich HTML aber wieder dort herausnehme, dann wird das Image wieder nur bis zum "Ende des Contents" angezeigt.

Nicht jedoch am Seitenende.

Fehlerhafter Code:

Code:

body {
  background:  #000000;
  background-image:url(./123.jpg);
  background-position:right bottom;
  background-repeat:no-repeat;

  margin:0;
  padding:0;
  min-height:100%;
 
}

div#footer {
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	background:#ddd;
	border-top:6px double gray;
}

Denn laut Internet liegt das Problem darin, dass nur der IE es richtig darstellt (CHrome etc tun dies nicht).

Das Problem ist nämlich dass Elternelemente min genauso groß sein müssen wie die Tochterelemente.

In meinem Fall wäre html dann 0/Default...

Edit:\

Jetzt geht es

Zitat:

html {
min-height:100%;
}

body {
background: #000000;
background-image:url(.123.jpg);
background-position:right bottom;
background-repeat:no-repeat;

margin:0;
padding:0;

}

div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}

tr0y · 10.02.2011, 19:27

Code:

* { 
   padding:0;
   margin:0;
   border:0;
}

body {
   background: #000000 url(123.jpg) right bottom no-repeat;
   min-height:100%;
}

div#footer {
   position:absolute;
   width:100%;
   bottom:0; /* stick to bottom */
   background:#ddd;
   border:0px solid #fff;
   border-top:6px double gray;
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Bild ausgeben solange das Script läuft	favo	PHP-Fortgeschrittene	6	17.09.2010 13:34
[Erledigt] Bild erstellen, speichern und gespeichertes Bild anzeigen	Garog	PHP Tipps 2009	26	11.07.2010 18:01
daten und bild in die DB und ausgeben	Crimson007	PHP Tipps 2010	16	14.04.2010 00:00
[GELÖST] Bild in die Datenbank einspielen	Timmbow	Datenbanken	15	16.01.2010 19:45
[Erledigt] bild wird nicht gespeichert, finde fehler nicht	Kay654	PHP Tipps 2009	4	24.12.2009 07:52
Bildeffekte berechnen (Bild in den Hintergrund anschregen)	Frank	PHP-Fortgeschrittene	2	28.11.2009 02:20
Bild in enuem Fenster öffnen?	K3HLIM	JavaScript, Ajax und mehr	6	10.04.2009 20:43
Bildupload in CMS funktioniert nicht	soffi	PHP Tipps 2009	18	10.01.2009 18:24
[Erledigt] Bild verändert sich auf Klick Script	errox	JavaScript, Ajax und mehr	1	21.10.2008 20:51
Transparentes Bild über Bild legen update gelöst	Broadcast	PHP-Fortgeschrittene	11	04.02.2008 15:27
[Erledigt] Bild aus Datei in Bild einfügen		PHP Tipps 2005-2	1	07.08.2005 23:36
[PHP«Image] Bild in ein anderes Bild einsetzen		PHP Tipps 2005-2	4	07.08.2005 19:39
Menü das von links nach rechts ins bild kommt zum aufklappen		HTML, Usability und Barrierefreiheit	11	28.06.2005 18:21
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30

09.02.2011, 19:39
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	CSS Bild unten rechts Hallo ihr Lieben, Es geht darum, dass ich gerne ein Bild ganz unten rechts haben möchte als Backgroundimage. Derzeitiger Code: Code: body { background-image:url(./_img/background.jpg); background-position: right bottom; background-repeat:no-repeat;} html { color: #ffffff; background: #000000; } Allerdings ist es in diesem Falle so, dass wenn die Seite nicht "lang genug" ist, das Image auch nur bis dahin geht wo das letzte Element der Seite ist. In meinem Fall ist das Backgroundimage jedoch davon abhängig dass es IMMER ganz UNTEN rechts steht und nicht "in der Mitte recht". Wie kann ich das realisieren ? Weiß das überhaupt jemand, geht so etwas vllt. gar nicht ? Miniaturansicht angehängter Grafiken


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

09.02.2011, 20:21
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	body { min-height:100% } __________________ "Nuschel ich?" - "Was?"

09.02.2011, 21:57
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Danke, dein Kommentar hat mich zum Ergebnis geführt. Code: background-position:right bottom; background-repeat:no-repeat; color: #ffffff; margin:0; padding:0; height:100%; von html & body

09.02.2011, 22:24
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Das Problem ist, wenn ich min-height eingebe dann wird der Footer 2 x angezeigt. Einmal dort wo der Content aufhört vom Body und einmal ganz unten. So sieht dann der "fehlerhafte" Code aus: Code: html, body { background: #000000; background-image:url(./abc.jpg); background-position:right bottom; background-repeat:no-repeat; margin:0; padding:0; min-height:100%; } div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */ background:#ddd; border-top:6px double gray; }

09.02.2011, 22:28
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Im "html" haben die Angaben eigentlich nichts zu suchen. __________________ "Nuschel ich?" - "Was?"

09.02.2011, 22:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Yo, kein Wunder also. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --