Header en fonction de son background ?

Résolu/Fermé
tintinus24 Messages postés 6 Date d'inscription jeudi 8 août 2013 Statut Membre Dernière intervention 10 novembre 2014 - 9 nov. 2014 à 18:57
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 10 nov. 2014 à 20:51
Bonjour, je suis débutant en CSS et pour mon PortFolio j'aimerais que l'image de background de mon header garde ses proportions.
Car, actuellement mon image de background se retrouve écrasée verticalement à cause du header qui est trop "fin".
Auriez vous des solutions qui pourraient m'aider ? Merci :)

Image: http://puu.sh/cJLKI/c96d9e750f.jpg
Code:

header{
background-image: url(../img/FondHeader.png);
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Mohave, sans-serif;
font-size: 20pt;
width:100%;
}

3 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 10/11/2014 à 05:35
Salut tu peux faire un background-size:cover;
mais il sera rogné suivant la résolution d'affichage.
ton header n'a pas de height défini, donc ca pose encore plus de problème.

le mieux est de définir un height en px à ton header, faire une image de la hauteur du header et d'une largeur "très grande" qui est rognée sur la droite suivant la taille de la fenetre.
les élément principaux de ton image doivent être à gauche, la partie droite pourra être rognée.

Sache qu'une page web est fluide dès que les largeurs sont exprimées en %
donc tout élément de background sera soit rognée, soit déformée.
Tu peux également utiliser les media-queries pour faire un background différent suivant la résolution de la fenetre

tu peux aussi utiliser max-width pour limiter la largeur d'une page.

tu peux aller voir mon site pour l'exemple. www.clownroberto.com
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
1
tintinus24 Messages postés 6 Date d'inscription jeudi 8 août 2013 Statut Membre Dernière intervention 10 novembre 2014
10 nov. 2014 à 20:31
Ok merci beaucoup je vais essayer l'image large avec une hauteur de header définie.
Je m'attaquerais aux média queries une fois structure générale finie
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
10 nov. 2014 à 20:51
tu peux mettre en résolu
0