Anzeige

Hintergrundbild in div

Hintergrundbild in div | PSD-Tutorials.de

Erstellt von kornyclown, 06.07.2012.

  1. kornyclown

    kornyclown Guest

    Hintergrundbild in div
    Wie manche bestimmt schon wissen bin ich grad dabei meine Homepage von Flash auf HTML/CSS umzubauen. Dazu habe ich mir schon die Tutorials zum Thema HTML5 und CSS3 von Pascal Bajorat angesehn aber da ich einige Sachen etwas anders haben will funktionieren sie natürlich bei mir wieder nich.

    Ich möchte das mein Hintergrund aus zwei Grafiken besteht einem Balken links, einem rechts. In dem Tutorial wird die Hintergrundgrafik einfach in dem html Tag über die CSS-Styledatei eingebunden. Das will ich aber nich. Damit ich den Hintergrund zum Schluss mit der restlichen Seite zentrieren kann wollte ich alles zusammen in einen wrapper stecken, dazu müssen die Tags, in dem die Hintergrundgrafik eingebunden ist aber im Body sein also wollte ich das mit zwei div-Containern machen. Aber wenn ich das mache wird kein Hintergrundbild angezeigt.
    Was läuft da falsch, bzw was muss ich machen damit es geht?
     
    #1      
  2. randacek_pro

    randacek_pro Mod | Forum

    Dabei seit:
    09.07.2009
    Beiträge:
    4.747
    Geschlecht:
    männlich
    Software:
    Adobe Geschichten, GIMP und Blender
    Kameratyp:
    Canon (D)SLRs
    Hintergrundbild in div
    AW: Hintergrundbild in div

    Müsste doch eigentlich gehen, wenn du den div gleich unterhalb des body-Tags anlegst und in diesen div dann deine zwei weiteren "gewrappten" divs anlegst, denen du je eine Klasse ".right" und ".left" zuweist. In einem dritten div kommt dann dein Content rein. Diese beiden div-Klassen kannst du ja ganz einfach am rechten und linken Rand ausrichten und in diese auch über CSS das jeweilige Background-Image einbinden.
    Oder verstehe ich da jetzt was falsch?

    Viele Grüße
     
    #2      
  3. kornyclown

    kornyclown Guest

    Hintergrundbild in div
    AW: Hintergrundbild in div

    Also das habe ich bis jetzt und da wird mir nichts angeigt.

    HTML:
    1.  
    2.  
    3. <div class="wrapper">
    4. <div class="bgleft"></div>
    5. <div class="bgright"></div>
    6. </div>
    7.  
    8.  
    9. </body>
    10.  
    CSS:
    Code (Text):
    1.  
    2. *{padding:0; margin:0;}
    3.  
    4. html, body{min-width:100%; height:100%;}
    5.  
    6. .wrapper{width:900px; margin:auto;}
    7. div.bgleft{background:url(../images/BG_left2.png) repeat-y left top;}
    8. div.bgright{background:url(../images/BG_right2.png) repeat-y right top}
    9.  
     
    #3      
  4. AukeArts

    AukeArts Guest

    Hintergrundbild in div
    AW: Hintergrundbild in div

    Manchmal sieht man den Wald vor lauter Bäume nicht. Ich bin gerade dein Beispiel durchgegangen und konnte einfach keinen Fehler finden ... aber dann kam mir die rettende Idee. Damit so ein Div funktioniert, muss es mindestens eine Höhen- oder Breitenangabe haben.

    In deinem Fall ja dann eine Breitenangabe. Also

    div.bgleft{width:450px; background:url(../images/BG_left2.png) repeat-y left top;} div.bgright{width:450px; background:url(../images/BG_right2.png) repeat-y right top;}

    Dann klappt es auch.
     
    Zuletzt von einem Moderator bearbeitet: 06.07.2012
    #4      
  5. randacek_pro

    randacek_pro Mod | Forum

    Dabei seit:
    09.07.2009
    Beiträge:
    4.747
    Geschlecht:
    männlich
    Software:
    Adobe Geschichten, GIMP und Blender
    Kameratyp:
    Canon (D)SLRs
    Hintergrundbild in div
    AW: Hintergrundbild in div

    Vereinfacht gesagt: du hast zwar divs angegeben, aber nicht, dass sie irgendwelche Dimensionen haben ;)
    Also die divs sind quasi nicht sichtbar, weil sie keine Höhe und Breite haben. Wenn du height und width ergänzt sollte das schon mal gehen. Sonst muss ich mir das noch mal genauer angucken, bin ziemlich im Stress weils hier ringsrum gewittert und ich gucken muss, dass der Keller trocken bleibt...

    Edit:
    Oh, da war AukeArts schneller ;)
     
    #5      
  6. kornyclown

    kornyclown Guest

    Hintergrundbild in div
    AW: Hintergrundbild in div

    Ich hab echt das Gefühl das wir der Sache näher kommen, die Erklärung mit den Dimensionen klingt echt plausibel und macht voll Sinn aber ich seh auch unter Angabe der Weite nichts.
    Ich habe mal testweise in die div-Container "test" geschrieben und dann seh ich meine Hintergrundgrafik entsprechend der Dimensionen des Wortes test. Das lässt mich vermuten, dass beim verlinken der Bilder etc kein Fehler vorliegt. Wenn ich "test" aber raus nehme und nur die Weite angebe (alles richtig geschrieben) dann sehe ich wieder nichts.
     
    #6      
  7. AukeArts

    AukeArts Guest

    Hintergrundbild in div
    AW: Hintergrundbild in div

    Okay, dann musst du doch beide Angaben machen ~ also Height und Width. Height kann man auch automatisieren, jedoch weiß ich nicht wie das klappt. 100% funktioniert irgendwie nicht. Ansonsten sieht bei mir die Verlinkung so aus.

    #bgleft{width:450px; height:450px; background:url(images/deinbild.jpg) repeat-y right top;}
     
    #7      
  8. mindraper

    mindraper me[code].Java(Script)

    Dabei seit:
    12.08.2007
    Beiträge:
    213
    Geschlecht:
    männlich
    Ort:
    Zuhause
    Software:
    Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil
    Hintergrundbild in div
    AW: Hintergrundbild in div

    hi.

    @korny:
    dass du nichts siehst, wenn du die weite angibst ist irgendwie logisch :) ein <div> ist ein sog. "block-element", das bedeutet, es hat "von natur aus" eine breite von 100% (also den gesamten raum, der ihm im umgebenden element zur verfügung steht) und ordnen sich deshalb untereinander an. etwas anders sieht es da bei der höhe aus. die höhe richtet sich, sofern nicht anders angegeben, nach dem inhalt + evtl. border, margins, paddings.

    ich kann dich schon sagen hören "och nööö" (jaaaa, ich hab gute ohren ;)), aber da du 2 <div>-container in deinem wrapper liegen hast und sich die divs ja untereinander anordnen und beide keine höhe haben, kannst du natürlich erstmal nichts sehen.

    übernimm doch einfach mal das hier in dein css, dann wirst du sehen was ich meine:

    #wrapper div {
    height: 200px;
    }

    da du die beiden divs mit jeweils einer klasse versehen hast (bgleft und bgright), nehme ich an, du möchtest diese beiden eben links und rechts haben. dafür musst du diese beiden entweder floaten oder absolut positionieren. ich rate mal zum absoluten positionieren, da du ansonsten den divs keine höhe von 100% geben kannst (auf gefloateten elementen greifen nur fixe angaben, also: px), absolut positionierte elemente können auch eine relative angabe verarbeiten in der höhe.

    allerdings wären dan cederholms "faux columns" warscheinlich so oder so besser für deine zwecke geeignet.

    bei der variante mit den 2 div-containers also (CSS):
    Code (Text):
    1.  
    2. * {
    3.    margin: 0;
    4.    padding: 0;
    5. }
    6.  
    7. .wrapper {
    8.    /* damit sich die divs an #wrapper ausrichten, sonst am browserfenster */
    9.    position: relative;
    10.    width: 900px;
    11.    height: 100%; /* höhe = kompletter browser */
    12.    margin: 0 auto;
    13. }
    14.  
    15. .bgleft, .bgright {
    16.    position: absolute;
    17.    top: 0;
    18.    width: 50%;
    19.    height: 100%;
    20. }
    21.  
    22. .bgleft {
    23.    left: 0;
    24.    background: transparent url(../images/BG_left2.png) repeat-y 0 0 scroll;
    25. }
    26.  
    27. .bgright {
    28.    right: 0;
    29.    background: transparent url(../images/BG_right2.png) repeat-y 0 0 scroll;
    30. }
    31.  
    dann sollte es wohl auch mit den nachbarn... oder so... :)

    hoffe das hilft
     
    Zuletzt bearbeitet: 07.07.2012
    #8      
  9. kornyclown

    kornyclown Guest

    Hintergrundbild in div
    AW: Hintergrundbild in div

    Also das is doch zum Mäuse melken. ich hab das jetzt so übernommen aber da passiert immer noch nichts.
    Hier nochmal ein Überblick über das was ich jetzt hab:

    HTML:
    1.  
    2. <!DOCTYPE HTML>
    3.  
    4.  
    5.  
    6. <meta charset="UTF-8">
    7. <title>Thomas Manz.de | VFX</title>
    8. <link rel="stylesheet" href="css/style.css">
    9. </head>
    10.  
    11.  
    12. <div class="wrapper">
    13. <div class="bgleft"></div>
    14. <div class="bgright"></div>
    15. </div>
    16.  
    17. </body>
    18.  
    19. </html>
    Code (Text):
    1.  
    2. @charset "UTF-8";
    3. /* CSS Document */
    4.  
    5. * {
    6.     padding: 0;
    7.     margin: 0;
    8. }
    9.  
    10. .wrapper {
    11.     position: relative;
    12.     width: 900px;
    13.     height: 100%;
    14.     margin: 0 auto;
    15. }
    16.  
    17. .bgleft, .bgright {
    18.     position: absolute;
    19.     top: 0;
    20.     width: 50%;
    21.     height: 100%;
    22. }
    23.  
    24. .bgleft {
    25.     left: 0;
    26.     background: transparent url(../images/BG_left.png) repeat-y 0 0 scroll;
    27. }
    28.  
    29. .bgright {
    30.     right: 0;
    31.     background: transparent url(../images/BG_right.png) repeat-y 0 0 scroll;
    32. }
    33.  
    Ich hab auch nochmal die Grafiken auf richtige Schreibweise und so, einige male gegengecheckt.

    P.S. Hier in der letzten Zeile:
    .bgright {
    right: 0;
    background: transparent url(../images/BG_right.png) repeat-y 0 0 scroll;
    }
    wird mir das "right:" rot gehighlightet, warum?

    EDIT:
    Vergesst es. Ich hab jetz noch weiter rumprobiert und jetz geschaft (fürs erste).
    Ich musste im Style sheet noch
    Code (Text):
    1. html, body {min-width: 100%; height:100%;}
    einfügen. Jetz klappts erstmal.
    Vielen Dank, ich freu mich.
     
    Zuletzt von einem Moderator bearbeitet: 07.07.2012
    #9      
x
×
×