1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

firefox positioniert hintergrundbild falsch

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von ma.buso, 25.09.07.

  1. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    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
     
  2. atomfried

    atomfried Leipziger Reinette

    Dabei seit:
    02.04.05
    Beiträge:
    1.781
    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.
     
  3. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    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.
     
  4. atomfried

    atomfried Leipziger Reinette

    Dabei seit:
    02.04.05
    Beiträge:
    1.781
    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.
     
    ma.buso gefällt das.
  5. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    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.
     
  6. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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>
    
     
  7. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    nö, geht genauso nicht.
     
  8. drok

    drok Klarapfel

    Dabei seit:
    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;
        ...
        ...   };
     
  9. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    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:
     
  10. drok

    drok Klarapfel

    Dabei seit:
    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:

     
    #10 drok, 28.09.07
    Zuletzt bearbeitet: 28.09.07
  11. msx3000

    msx3000 Martini

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

    background url("image.gif")
     
    ma.buso gefällt das.
  12. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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.
     
  13. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
  14. drok

    drok Klarapfel

    Dabei seit:
    02.06.07
    Beiträge:
    278
    Dort setzt er das Hintergrundbild ans Ende(Fuß) des body, nicht des Browserfensters...
    siehe dazu meinen zweiten Beitrag auf Seite 1.
     
  15. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Opps mein Fehler! Nehme alles zurück.
     
  16. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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
     
  17. drok

    drok Klarapfel

    Dabei seit:
    02.06.07
    Beiträge:
    278
    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.
     
  18. ma.buso

    ma.buso Châtaigne du Léman

    Dabei seit:
    16.04.05
    Beiträge:
    824
    habe es jetz auch mit so einer box gemacht, in der das hintergrundbild liegt.
     
  19. drok

    drok Klarapfel

    Dabei seit:
    02.06.07
    Beiträge:
    278

    Würde es bei dir denn mit "background-attachment:fixed" klappen ?
     
    ma.buso und mschoening gefällt das.
  20. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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
     
    ma.buso gefällt das.

Diese Seite empfehlen