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

Über ein Hintergrund Bild ein Bild legen

Dieses Thema im Forum "CSS" wurde erstellt von Orphelina, 24. März 2005.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Orphelina

    Orphelina Erfahrenes Mitglied

    Nur IE zeigt Hintergrundbild an

    Hallöchen,

    also, ich habe einen Header ein background-image. Leider zeigen mir die anderen Browser gar kein Hintergundbild an- woran liegt das?

    Gruss Orphelina

    HTML:
    HTML:
    1. <body >
    2.  
    3. <div id="Container">
    4.  <div>
    5.    <div id="Header" class="mainnav" style="padding: 95px 0px 0px 5px;">
    6.       <a href="" >Bla1</a> |
    7.       <a href="" >Bla2</a> |
    8.       <a href="" >Bla3</a> |
    9.       <a href="" >Bla4</a>
    10.     </div>
    11.   </div>
    12.  <div>
    13.      <div class="Content">Content1mit viel Blabla</div>
    14.    <div class="Content">Content2 mit viel Blabla</div> 
    15.    <div id="Navi">Navigation</div>
    16.    </div>
    17.   <div id="Foot" class="mainnav" style="padding: 4px 0px 3px 5px;">
    18.     </div>
    19.  </div>
    20. </body>
    CSS
    Code (Text):
    1.  
    2. #Container {background:#FFFFFF;width:990px; height:590px;}
    3. #Header{
    4.     width:990px;
    5.     height:120px;
    6.     background-image: url("img\head.png");
    7.     float:left;
    8.     }
    9. .content {margin:1px;
    10.     background:#FFFFFF;
    11.     height:445px;
    12.     width:340px;
    13.     padding:20px 20px 40px 20px;
    14.     float:right;
    15.     }
    16.  
    17. .mainnav{font-family: Arial,Verdana, Tahoma;
    18.     font-size: 12px;
    19.     font-style:bold;
    20.     text-transform: uppercase;
    21.     color:#CCCCCC;
    22.     float:right;
    23.     }
    24.  
    25. #Navi{ 
    26.     font-family: Arial, Verdana, Tahoma;
    27.     font-size:14px;
    28.     width:150px;
    29.     padding:20px 2px 0px 10px;
    30.     float:left;
    31.     }
    32.  
    33. #Foot { height:25px;
    34.     width:990px;
    35.     }
    Zuletzt bearbeitet: 24. März 2005
  2. Maik

    Maik Gast

    Der Fehler liegt an dem verwendeten Backslash:
    Code (Text):
    1. #Header{
    2.     width:990px;
    3.     height:120px;
    4.     background-image: url("img[color=red]\[/color]head.png");
    5.     float:left;
    6.     }
    7.  
  3. Gumbo

    Gumbo Erfahrenes Mitglied

    Wie wär's, wenn du als Verzeichnisseparator das slash-Zeichen verwendest?
  4. Orphelina

    Orphelina Erfahrenes Mitglied

    Ich kann im FF und Opera nicht mal eine andere Hintergrundfarbe statt dem Bild nehmen, die ignorieren das einfach!
  5. Orphelina

    Orphelina Erfahrenes Mitglied

    Also Farben gehen, ich hatte nen Fehler drin, aber sobald ich versuche ein Bild einzufügen, ignorieren es alle...
    Und ich versteh es einfach nicht!
  6. c2uk

    c2uk Erfahrenes Mitglied

    Hast Du Gumbos Vorschlag denn auch umgesetzt?

    also anstatt img\bild.png => img/bild.png
  7. Gumbo

    Gumbo Erfahrenes Mitglied

    Dann wird wohl der relative URL zur Hintergrundgrafik nicht korrekt sein. Falls sich die Grafik in einem parallelen Verzeichnis zur CSS-Datei befindet, versich mal ../img/head.png als Pfadangabe.
  8. Maik

    Maik Gast

    Wie gesagt, der Grafikpfad muß so lauten:

    Code (Text):
    1. background-image: url("img[B]/[/B]head.png");
  9. Orphelina

    Orphelina Erfahrenes Mitglied

    Ja das Bild geht jetzt endlich, vielen Dank erstmal!
    Jetzt hab ich halt das Problem, dass ich da noch ein Bild möchte... Also quasi ein Hintergrundbild wie ich es bereits habe und dann noch ein Logo. Aber er zeigt es mir nie an! Ich habe es schon mit dem z-index versucht, aber das hab ich wohl falsch angewendet, weil es gar nichts gebracht hat!
  10. c2uk

    c2uk Erfahrenes Mitglied

    Könntest Du uns mal vielleicht eine Onlineversion davon zur Verfügung stellen? Oder zumindest einen aktuellen Sourcecode vielleicht auch mit ner kurzen Info wie die Ordnerstrukturen sind dazu?
  11. Maik

    Maik Gast

    Wenn du uns den kompletten Source-Code postest, können wir dir besser weiterhelfen ;-]
  12. Orphelina

    Orphelina Erfahrenes Mitglied

    Okay, ich kann die Sourcen leider nicht online stellen derzeit...
    Aber hier die beiden Files...
    Nicht töten, aber ich hab alle Dateien einfach auf meinen Desktop...

    Code (Text):
    1. body{background:#CCCCCC;}  
    2. #container {background:#FFFFFF;    
    3. width:1020px;      
    4. height:550px;}  
    5. #head   {background-image: url(head_neu.png);  
    6. height:140px;      
    7. width:1020px;}  
    8. #logo   {background-image: url(logo_w.png);
    9. background-repeat:no-repeat;  
    10. background-position:750px 50%;}  
    11. .content{width:330px;
    12. height:385px;
    13. float:left}
    14. .navi   {width:170px;
    15. height:385px;
    16. float:left}  
    17. #foot   {width:1020px;      
    18. height:25px;          
    19.  float:left}
    HTML:
    1. <body >  
    2.  <div id="container">          
    3. <div id="head">        
    4. <div id="logo"></div>                
    5. </div>          
    6. <div>          
    7. <div class="Navi" >Navigation</div>    
    8. <div class="Content" >Content2 mit viel Blabla</div>    
    9. <div class="Content">Content1 mit viel Blabla</div>    
    10.  <div class="Navi">News</div>          
    11.  </div>  
    12. <div style="float:both;"></div>  
    13. <div id="Foot">  
    14. <a href="" >Sitemap</a> |    
    15. <a href="">Kontakt</a> |    
    16. <a href="" >Impressum</a></div>    
    17.  </div>
  13. Maik

    Maik Gast

    Um das Logo über den Header zu legen, müssen die beiden DIVs entsprechend positioniert und das Logo-DIV mit einem höheren z-index versehen werden - also z.B.:

    Code (Text):
    1.  
    2. #head
    3. {
    4. position: absolute;
    5. left: 0;
    6. top: 0;
    7. z-index: 1;
    8. background-image: url(head_neu.png);   
    9. height: 140px;      
    10. width: 1020px;
    11. }  
    12.  
    13. #logo
    14. {
    15. position: absolute;
    16. left: 0;
    17. top: 0;
    18. z-index: 2;
    19. background-image: url(logo_w.png);
    20. background-repeat: no-repeat;  
    21. background-position: 750px 50%;
    22. }  
    23.  
    Evtl. solltest du für #logo eine Weiten- und Höhenangaben bestimmen.
  14. c2uk

    c2uk Erfahrenes Mitglied

    Tut mir leid, aber das stimmt so leider nicht.

    Das ist eher der Fehler, gib #logo die gleichen Größenwerte wie dem header-div und es geht (im Firefox und IE, jedenfalls)
    Zuletzt bearbeitet: 24. März 2005
  15. Orphelina

    Orphelina Erfahrenes Mitglied

    Mh, leider sehe ich das Logo immer noch nicht... Obwohl ich noch Weiten- und Höhenangaben gemacht habe...
  16. c2uk

    c2uk Erfahrenes Mitglied

    Also wenn es so nicht klappt, dann versuch doch bitte wirklich mal uns eine Onlineversion zur Verfügung zu stellen (oder zippe alle dateien und häng es hier an):

    Code (Text):
    1.  
    2.    #logo    {
    3.     height:140px;
    4.     width:1020px;
    5.     background: url(logo_w.png) no-repeat 750px 50%;
    6.    }  
    7.    
  17. Maik

    Maik Gast

    Du könntest das Logo-DIV auch mit margin-top über das Header-DIV schieben:
    Code (Text):
    1.  
    2. #logo
    3. {
    4. height:140px;
    5. width:1020px;
    6. margin-top: -140px;
    7. background-image: url(logo_w.png);
    8. background-repeat: no-repeat;  
    9. background-position: 750px 50%;
    10. }
    11.  
  18. Orphelina

    Orphelina Erfahrenes Mitglied

    Irgendwie hat es jetzt funktioniert, man bin ich jetzt erleichtert!

    Vielen Danke, Leute!

    Gruss und schönes Osterfest
  19. Maik

    Maik Gast

    Kannst du uns auch noch verraten, was du am Source-Code verändert hast, dass es jetzt funktioniert?
  20. c2uk

    c2uk Erfahrenes Mitglied

    Ähm Maik, Du machst mir irgendwie Angst mit diesen komischen Tricks, von wegen absolut positionieren und jetzt auch noch margin-top und so. Der Layer #logo ist bereits im Layer #head enthalten, da brauchts sowas nicht, siehe meine Lösung hier:

    http://www.daniel-guth.de/tmp/test4.html
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen