firefox positioniert hintergrundbild falsch

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
hallo,

firefox und opera stellen bei mir ein hintergundbild falsch (bzw. nicht) dar. dieses soll nur unten und dort über die ganze breite erscheinen, was auch im safari und msie klappt. hier der gekürzte code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
	<style type="text/css">
		body{
			background: #ffffff url(img/mainbg.gif) repeat-x bottom;	
		}	
	
		[....]
	
	</style>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		[....]				
	</body>
</html>

komischerweise klappt es, wenn ich den doctype weglasse. o_O
 

atomfried

Leipziger Reinette
Registriert
02.04.05
Beiträge
1.804
komischerweise klappt es, wenn ich den doctype weglasse. o_O

wieso "komischerweise"? ohne doctype schaltest du in den quirks modus. wenn du unbedingt xhtml strict verwenden willst dann müsstet du dich da ein wenig informieren was das bedeutet.
 

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
das weiß ich.
komischerweise, weil ich es komisch finde. ich habe zumindest noch nie was davon gehört, dass diese css-auszeichnung im body von xhtml (strict) und html-dokumenten nicht erlaubt ist.
komisch ist auch, dass sowohl top als auch center funktionieren, nur nicht bottom.
weiterhin komisch ist, dass in einem div im selben dokument ein hintergrundbild mit repeat-x bottom richtig dargestellt wird.
 

atomfried

Leipziger Reinette
Registriert
02.04.05
Beiträge
1.804
ich habe zumindest noch nie was davon gehört, dass diese css-auszeichnung im body von xhtml (strict) und html-dokumenten nicht erlaubt ist.

das habe ich auch noch nicht gehört. es ist wahrscheinlich auch gar nicht so, das es nicht erlaubt ist. es geht doch hier um die darstellung in den verschiedenen browsern, welche wir ja wissen nicht alles darstellen obwohl es "erlaubt" ist.
Ist XHTML strict vorgabe? ansonsten halt mal mit HTML 4 versuchen oder mal die domain im doctype weglassen.
 
  • Like
Reaktionen: ma.buso

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
xhtml transitional ginge auch noch. aber da funktionierts ja auch nicht. auch nicht ohne die domain. werde ich wohl bei den betroffenen browsern den doctype weglassen müssen.
wenn ich statt repeat-x repeat mache zeigt er das hintergrundbild zwar an, aber hier auch nicht wie es bei bottom sein sollte sondern wie bei top.
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
geht doch wenn mans richtig macht:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Hello World!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*<![CDATA[*/
        body{
            background: url(img/mainbg.gif) repeat-x bottom left #fff;   
        }   
    /*]]>*/
    </style>    
</head>

<body>
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
 

drok

Klarapfel
Registriert
02.06.07
Beiträge
278
Styles bitte immer in ein externes Stylesheet schreiben und dieses dann einbinden ;)

Probiers mal so:

Code:
 body {
    background-image:url(...);
    background-repeat:repeat-x;
    background-position:bottom;
    ...
    ...   };
 

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
das style liegt in einem externen stylesheet.
einzeln für background hab ich auch schon versucht, läuft auch nicht.
es ist ja nicht so dass garnix funktioniert. es funktioniert nur bottom repeat-x nicht. :mad:
 

drok

Klarapfel
Registriert
02.06.07
Beiträge
278
Hm wenn dus auch scho so probiert hast wie ich es geschrieben habe, dann muss es aber an irgendwas anderem liegen.
So wie ich es geschrieben habe funzt es beim Firefox eigentlich...

edit: ich glaube IE und manch andere zeigen das besagte Hintergrundbild an den Fuß des Browserfenster bzw des Viewports, obwohl sich "background-position" eigentlich am body orientiert.
Da der body nicht mit dem gesamten browserfenster gleichzusetzen ist kann es da wohl zu schwierigkeiten kommen.

Kannst es ja mal ausprobieren und dem body eine mindestgröße geben.

oder hau das hier noch mit in den Style:

Code:
background-attachment:fixed;

Dabei sei folgendes zu beachten:

Bemerkung:
Der Internet Explorer bis zur Version 6 kennt background-attachment nur im <body>-Tag. Opera 6, Mozilla 1 und Netscape 7 akzeptieren es auch in anderen Elementen wie Absätzen (<p>) und <div>-Containern. Der Opera 6 fixiert Hintergrundbilder sogar in Tabellenzellen.

Quelle: http://www.css4you.de/background-attachment.html
 
Zuletzt bearbeitet:

msx3000

Martini
Registriert
19.05.05
Beiträge
646
Setz mal den Pfad fürs Bild in Anführungsstriche:

background url("image.gif")
 
  • Like
Reaktionen: ma.buso

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Styles bitte immer in ein externes Stylesheet schreiben und dieses dann einbinden ;)

Probiers mal so:

Code:
 body {
    background-image:url(...);
    background-repeat:repeat-x;
    background-position:bottom;
    ...
    ...   };

Wieso dass denn? Wenn es nur zwei Zeilen hat (wie in diesem Fall ist das wohl egal!). Ich habe es ausporbiert bei mir und es funktioniert nur wenn du
Code:
background: url(img/mainbg.gif) bottom left repeat-x;

nimmst.
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
also ich habe da mal darüber nachgedacht! Wie soll das denn gehen wenn der Body immer nur so gross ist wie der Inhalt? Damit ich etwas auf "bottom" bringen kann muss der Browser wissen wie gross der Kasten ist!
Entweder du nimmst einen Footer mit position: absolute und bottom: 0 oder du machst den body so, dass er grösser ist als das Browserfenster.

Mein Vorschlag:
http://stuff.digitalpazzo.com/max/test2.zip
 

drok

Klarapfel
Registriert
02.06.07
Beiträge
278
Hi,
also ich habe da mal darüber nachgedacht! Wie soll das denn gehen wenn der Body immer nur so gross ist wie der Inhalt? Damit ich etwas auf "bottom" bringen kann muss der Browser wissen wie gross der Kasten ist!

Eben hier kommt background-attachment:fixed ins Spiel.
Bei der Verwendung orientiert sich das Image, bzw die Position des Images, dann am Viewport (Browserfenster) und nicht am body.
 

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
Hi,
also ich habe da mal darüber nachgedacht! Wie soll das denn gehen wenn der Body immer nur so gross ist wie der Inhalt? Damit ich etwas auf "bottom" bringen kann muss der Browser wissen wie gross der Kasten ist!
Entweder du nimmst einen Footer mit position: absolute und bottom: 0 oder du machst den body so, dass er grösser ist als das Browserfenster.

Mein Vorschlag:
http://stuff.digitalpazzo.com/max/test2.zip

habe es jetz auch mit so einer box gemacht, in der das hintergrundbild liegt.
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
@drok: Deine Lösung ist die beste. Wichtig: man sollte background-attachment nur für das "body"-tag benutzen!

Hier ist das Markup und CSS: LINK
 
  • Like
Reaktionen: ma.buso