Background an Framgröße anpasse ?!

  • Hallo,


    ich habe schon länger nach eine Lösung gesucht. Leider hab ich nichts gefunden.

    Es gibt bestimmt auch andere Lösungen für das was ich vor habe... Nur her damit :)


    Ich habe mir ein PNG gemacht um abgerundete Ecken innerhalb des Frames zu haben. Wie kann ich diese so anpassen lassen, dass sozusagen der Frame voll ausgefüllt ist. Das dabei die PNG leicht verzerrt ist nicht so schlimm. Hauptsache die Ecken sind rund.


    Besten Dank

  • Code
    <style>    
    .Frame {
        height: 100vh;
        background-color: gray;         
        border-radius: 20px;        
    }
    </style>
    
    <div class="Frame"></div>

    Vielen Dank :)


    Das hat mir beim testen einen grauen Frame gegeben. Ich habe es ungekehrt und ein weißes Frame auf grauem Hintergrund erstellt.


    Jetzt habe ich das Problem, dass der Inhalt irgenwie nicht im Rahmen ist sondern darunter?! Wo kommt der Inhalt rein?


    Ich arbeite momentan eher unprofessionell mit Dreamweaver und habe mit Sicherheit noch einen guten Weg vor mir. Wenn jdm einen also auch hier irgeneinen guten Tip hat wo man sich da am besten schlau macht ... nur her damit :)


    Der Quelltext sieht aktuell so aus:

  • <style>
    body {
    background-color: gray;
    }

    .Frame {
    margin: 20px;
    padding: 15px;
    height: calc(100vh - 40px);
    background-color: #fff;
    border-radius: 20px;
    }
    </style>
    </head>

    <body>
    <div class="Frame">
    <p>Hallo,</p>
    <p>was geht ab? Ist ein Rahmen da?</p>
    <p>Peace :)</p>
    </div>

  • Hallo Ch.i, ändere mal Deinen Grundaufbau Deiner Webseite. Das was Du uns zeigst ist Oldscool und führt über kurz oder lang zu Problemen.


    Nimm diesen Grundaufbau des HTML.

    <!DOCTYPE html>
    <html lang="de">
    <head> <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="style.css">

    <title>Titel</title>
    </head>
    <body>
    </body>
    </html>

Jetzt mitmachen!

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