Header-Image an Bildschirmgröße automatisch anpassen

    hi stef !

    Das heißt ich füge den HTML Code dann einfach in Wordpress unter Editor im stylesheet.php ein, hab ich das richtig verstanden? Und wo im stylesheet füge ich den Code ein?

    Gruß

    Hallo Zusammen,

    habe es jetzt endlich geschafft !!!

    Ich wusste nicht dass ich unter header.php diesen HTML Code eingeben musste damit das ganze greift.

    Also habe ich mein Bild jetzt im header.php folgenden HTML code eingebene

    PHP
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
[COLOR=#ff0000][size=10]  [B]            <img class="headerbild" src="http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg" alt="header" >[/B][/SIZE][/COLOR]
            </a>

    und dann im stylesheet.php folgenden Code

    Code
    img.headerbild {
    display: inline-block;
    min-width: 400px;
    max-width: 1557px;
    width: 100%;
    margin: 4px auto;
}


    Vielen Dank an Stef, Nassar und MrMurphy. Ohne euch hätte ich das nicht geschafft.

    Jetzt kommt man zwar nicht mehr zu Startseite wenn man auf den Header klickt - aber das ist mir nicht so wichtig wie dass der Header richtig skaliert auch bei kleineren Bildschirmen.
    Wenn ihr noch einen Tipp habt wie diese Funktion wieder einbaue dann wäre das super, ist aber im Moment nicht so notwendig.


    Danke Nochmals

    Viele Grüße

    Code
    [COLOR=#0000ff]<a href="http://test-66838.alfa3044.alfahosting-server.de/"[/COLOR]>[COLOR=#ff0000]<img class="serwus" src="http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg" alt="header">[/COLOR][COLOR=#0000ff]</a>[/COLOR]

    2 Mal editiert, zuletzt von djheke (27. August 2016 um 10:02)

    Hallo

    Ich habe mal ein Beispiel für ein Responsive Design erstellt.

    Das Bild wurde dazu in mehrere Einzelbilder zerlegt.

    Das Logo behält seine Größe unabhängig von der Fenterbreite so weit möglich bei.

    Die restlichen Bilder werden bei schmalerem Fenster nach und nach ausgeblendet, so dass ihr Inhalt erkennbar bleibt.

    Testseite ChiefIntensiv

    Gruss

    MrMurphy

    Zitat von djheke
    Code
    [COLOR=#0000ff]<a href="http://test-66838.alfa3044.alfahosting-server.de/"[/COLOR]>[COLOR=#ff0000]<img  class="serwus"  src="http://test-66838.alfa3044.alfahosting-server.de/wp-content/uploads/2016/08/header-2XXXXXXXXX.jpg"  alt="header">[/COLOR][COLOR=#0000ff]</a>[/COLOR]

    Super vielen Dank !


    Auch das ist eine schöne Alternative um den Header an die jeweilige Fensterbreite anzupassen !
    Gefällt mir ausgesprochen gut!

    Gruß

    ChiefIntensiv