Ist es möglich einen Div mit 100% automatischer Anpassung zu erstellen?

  • Hallo liebe Community


    Erst mal möchte ich mich beim Ersteller dieser Hilfeseiten bedanken.....es wird wohl demnächst eine Bestellung geben für die gesamten Video's ;)
    Allerdings wollte ich mal die Experten fragen ob folgendes rein mit html und css möglich ist und falls ja, in welchen Browsern das dann unterstützt werden würde.


    Ich möchte in einem DIV ein Bild hinterlegen, welches sich, egal wie hoch oder breit die Seite ist, immer zu hundert Prozent an die gesamte Seite anpasst. Selbst wenn durch die Skalierung das Bild etwas unschön werden sollte, es soll sich nun mal so verhalten.


    Ich habe mir selbst das folgende zusammengebastelt:




    CSS
    #bg {    
      background-image: url(../img/bg/bg.jpg);    
      background-repeat: no-repeat;   
      background-size: 100%;    
      position: absolute;   
      width: 100%;    
      height: 100%;   
      top: 0;   
      left: 0;
    }




    Vorweg....auch wenn in dem Tutorial immer gesagt wird, dass die css Datei neben die index.html gehört, so bin ich doch der Meinung dass man vorweg eine saubere Ordnerstruktur einhällt, sprich die Dateien in jeweilige Ordner verfrachten.
    Desshalb sieht für dieses Testobjekt meine Ordnerstruktur wie folgt aus:



    Hauptordner
    -index.html
    -css
    __ '-->design.css
    -img
    __ '--->bg
    _______'-->bg.jpg
    -js
    ich hoffe man kann das so erkennen ;)


    Aber jeder, wie er es haben möchte.....nun denn...auf jeden Fall verhällt sich das ganze nicht so wie ich es mir vorgestellt hatte.
    Das Bild passt sich zwar wohl in der Breite zu 100% an, das Seitenverhältnis des Bildes bleib jedoch immer bestehen....macht man das Fenster zum Beispiel höher als breiter, sieht man dass das Bild sich nicht zu hundert Prozent an die Höhe anpasst.


    Gibt es irgendwie eine Möglichkeit das so zu bewerkstelligen?


    Ach ja...ich hatte noch vergessen zu erwähnen dass der DIV aus dem normalen Textfluss heraus sein muss. Als Testbild könnt ihr irgendeines nehmen....meines hatte 1024 x 768 Pixel...


    Danke


    Gruss


    Christian

  • CSS
    div#bg  {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:-1;
        background-image: /*deine angaben...*/;
    }


    Dadurch wird der Bereich über den gesammten Bildschirm gespannt und das Bild sollte auch gespannt werden :)

  • Hallo


    Das habe ich eben probiert, das funktioniert allerdings nicht....das Bild wird ausserdem auch noch wiederholt. Leider hilft auch das hinzufügen von:

    CSS
    background-repeat: no-repeat;


    leider nicht weiter :(
    Das Bild wird dann zwar nicht mehr wiederholt, doch es wird auch nicht an die Breite und Höhe der Seite angepasst.


    Vielleicht weiss doch noch einer die Lösung?


    Danke



    Gruss



    Christian

  • Wenn du wirklich immer genau so Breit und Hoch, wie der Bildschirm ist kannst du es so machen:

    CSS
    body{
        background-image: url(bg_ordner/bg.png);
        background-size: 100% 100%;
    }


    Das Position absolute usw, kann man sich prinzipiell sparen ;)


    Um ein div immer In Screen Größe zu haben:


    Wenn du jetzt ein 2 Spalten Layout haben willst, von dem eine Spalte immer variabel ist und z.B. die andere mit Navigation, eine feste Breite hat, kannst du so vorgehen: (gleich für die Höhe..)



    Das ist ungetestet, aber ich denke es funzt :)

  • Hallo



    Also ich habe das soweit getestet, doch es scheint nicht zu funktionieren :(
    Zumindest bringt es mir nicht den erwünschten Effekt.
    Leider trifft auch folgender Code das ganze noch nicht, kommt aber schon sehr nahe daran:


    CSS
    background-size: cover;



    Der ganze Code sieht dann so aus:


    CSS
    #bg {    background-image: url(../img/bg/bg.jpg);    background-repeat: no-repeat;    background-size: cover;    position: absolute;    width: 100%;    height: 100%;    top: 0;    left: 0;}



    Allerdings denke ich wird das nicht von allen Browsern so unterstützt.


    Das Bild deckt dann immer zu 100 % das gesamte Fenster, verschiebt sich allerdings, wenn es schmäler wird nach unten. Die Skalierung wird immer beibehalten.


    Was ich möchte ist jedoch dass das Bild immer zu 100% in der Höhe und zu 100% in der Breite angezeigt wird und das, egal welche Höhe und Breite das Fenster hat.


    Gruss



    Christian

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!