Header responsive machen

    Hey:)
    Ich habe eine Frage.
    Mein header ist mir nicht möglich responsive einzufügen und hoffe auf Hilfe.
    Habe viel probiert aber es klappt leider alles nicht :(

    Die Breite und die Höhe des Headers soll je nach Bildschirm automatisch wachsen/verkleinern.
    So, dass die weiße transparente Grafik und die untere Website immer sich mitverändert.

    Geht das?!

    LG
    Madeleine

    Das ist schonmal super:)
    Ich füge die Seite mal hinzu, hoffe das es hilft...hm das geht nicht, dann der Kopfbereich und CSS dazu.
    Es würde mir echt helfen, wenn ich wüßte, wie es endlich klappt...Danke:o

    LG
    Madeleine

    HTML
    <body>


<div id="gesamtseite">
<!-- Beginn Kopf -->
<div id="kopfbereich" class="clearfix">
<div id="kopfgrafik"><img src="images/kopf.png" alt="" height="314" border="0" width="964"></div>
    Code
    html, body{
background-color: #787878;
font-size: 101.01%;
height: 100.1%;
background-image:url(../images/header2.jpg);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
}

    Hintergrundbild
    header2.jpg (1920x314)

    Transparentes Bild
    kopf.png (964x314)

    Hallo

    Dein Infos sind leider immer noch sehr vage. Ein einzelnes Bild kann zudem nicht responsive sein, es kann sich nur der Breite des Fensters anpassen. Der html-Quelltext will eher folgendermaßen aussehen:

    Code
    <header class="pageheader">
      <figure>
         <img src="images/kopf.png" alt="Hier gehört immer ein Text rein der das Bild beschreibt">
      </figure>
   </header>

    Aktuelle Seiten sollten grundsätzlich mit HTML5 und CSS3 erstellt werden. Dazu gehört dann auch das passende Elemente wie header und figure benutzt werden.

    id sollten nur verwendet werden wenn sie sachlich erforderlich sind, ansonsten ist class besser geeignet. Wenn weder id noch class erforderlich sind sollten beide gleich wegbleiben. In deinem Beispiel reicht eine class für header und ist auch sinnvoll, da das header-Element mehrmals auf einer Seite erscheinen darf.

    Da weder für figure noch für img spezielle Angaben erforderlich sind die class oder gar id erfordern bekommen die beiden Elemente auch keine. Die notwendigen speziellen Angaben können problemlos über die class vom header zugewiesen werden oder allgemein erstellt werden wie in meinem Beispiel.

    Zudem sollte der html-Quelltext nur die wirklich notwendigen Angaben enthalten, also möglichst schlank und damit übersichtlich sein.

    Grafiken sollten keine Attribute wie width, height oder border enthalten. Das wird mit CSS geregelt.

    Grafiken sollten so bearbeitet werden, dass sie nur so groß sind wie sie maximal erscheinen sollen, auch um unnötigen Traffic zu vemeiden.

    Code
    <div id="gesamtseite">

    So ein Container ist (und war) in der Regel überflüssig und stört nur - also weglassen.

    Zum CSS

    Das könnte folgendermaßen aussehen:

    Angaben wie

    Code
    html,
      body {
         font-size: 101.01%;
         height: 100.1%;
      }

    sind heutzutage nicht mehr erforderlich und sinnvoll. Also weglassen.

    Angaben wie

    Code
    html,
      body {
         text-align: center;
      }

    sind an dieser Stelle nicht sinnvoll. So sollten mit text-align immer nur einzelne Elemente zentriert werden, niemals eine gesame Webseite oder ein größerer Container. Und, wie die Bezeichnung bereits hergibt, sollte es sich nur um Text-Elemente wie p, h1 bis h6, li und so weiter handeln.

    Code
    background-image: url(../images/header2.jpg);
         background-repeat: no-repeat;
         background-position: center top;

    Diese Angaben sollten dem betroffenen Container (in meinem Beispiel dem header) direkt zugewiesen werden, falls sie überhaupt erforderlich sind.

    Deine Grafik lässt vermuten, dass deine Webseite mehr Inhalt und mehr CSS enthält. Ich kann nur das berücksichtigen was du hier zeigst.

    Gruss

    MrMurphy

    Hast du es schon mal mit dem Befehl background-size probiert? background-size: cover gibt zum Beispiel an, dass der header über den ganzen Bildschirm angezeigt wird. Mit einer Prozentangabe kannst du angeben, zu wie viel Prozent der Header den Bildschirm bedecken soll.