28217 sujets

CSS et mise en forme, CSS3

Header responsive

Bonjour,
Je souhaite rendre un header extensible.
Je sais faire en CSS le background du site entier en responsible, en utilisant la propriété cover, mais pour rendre seulement le bg du header responsive, je galère.

Voici mon code. Merci pour votre aide 


<body> 
      <div id="header">
         <div class="wrap">
         Contenu du header
        </div> <!-- Fin wrap-->        
      </div> <!-- Fin Header-->
    <div id="content">
    Contenu du site
    </div>
</body>




.wrap {position:relative; width:980px; height: 300px;  color:#f6e4b8; margin: 0 auto}

/* ===================== HEADER ===================== */
#header {margin:0; padding:0; max-height: 300px; background: url(../img/bg_header1.jpg) no-repeat top left fixed; width: 100%;}

Modifié par dreadstock (20 Aug 2012 - 16:28)
Administrateur
Bonjour,

background-size: cover ? cover y est une valeur, pas une propriété Smiley cligne

Si tu vires max-height et remplace height par min-height (ou le vire également), tu évites de bloquer les niveaux de zoom texte : ce sera librement extensible en hauteur. Est-ce que ça aide pour rendre le header responsive ?
Felipe a écrit :
Bonjour,

background-size: cover ? cover y est une valeur, pas une propriété Smiley cligne

Si tu vires max-height et remplace height par min-height (ou le vire également), tu évites de bloquer les niveaux de zoom texte : ce sera librement extensible en hauteur. Est-ce que ça aide pour rendre le header responsive ?



Je viens de rajouter cette petit ligne que je viens de trouver sur le net, background-size: 100%; et ca marche.
Sujet clos
Aller à