responsive design et height qui n'est pas pris en compte

Marsh Posté le 25-02-2013 à 18:39:50

Bonjour à tous,

J'ai une image en background :

Code :

<header id="top"></header>

mon code responsive design :

Code :

#top {
background-size:contain;
-moz-background-size:contain;
-webkit-background-size:contain;
background-repeat:no-repeat;
width:auto;
}

mon image se redimensionne bien
SAUF que ça garde la valeur du height du header

donc j'ai fait

Code :

header {
height:100%
}

mais ça ne change rien
j'ai mon image redimensionner et un grand écart en dessous qui, j'ai l'impression, garde le height de l'image..

J'espère que je suis clair :pt1cable:

Quelqu'un pourrait il m'aider?

Merci

Reply

Marsh Posté le 25-02-2013 à 18:39:50

Reply

Marsh Posté le 25-02-2013 à 21:05:14

il faut que les parents ait un height:100% aussi (html>body...)

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 25-02-2013 à 21:14:21

merci pour ta réponse mais ça ne fonctionne pas plus

en gros j'ai :

Code :

@media screen and (max-width: 1000px) {
html {
height:100%;
}
body {
width: 100%;
height:100%;
background-color:#000000;
}
#top {
background-size:contain;
-moz-background-size:contain;
-webkit-background-size:contain;
background-repeat:no-repeat;
width:auto;
}
header {
height:100%;
}
}

Reply

Marsh Posté le 25-02-2013 à 21:22:35

Tu as un lien de test ?

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 25-02-2013 à 21:32:44

je t'ai envoyé un msg privé

Reply

Marsh Posté le 25-02-2013 à 22:37:05

Ok, ne confond pas le flux et les background... L'image de fond se fitera à son conteneur et non l'inverse !
Pour ce que tu demande, je te suggère :

<header id="top">
<img alt="" width="100%" src="images/top.jpg" />
</header>

avec :

#top {
width:100%;
}

Fait un conteneur global pour restraindre la largeur + centrage par margin:auto car c'est pas top de le faire sur ton <body>

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 26-02-2013 à 10:08:35

merci pour ta réponse
j'ai besoin de ce background car je vais y positionner des choses dessus...

Reply

Marsh Posté le 26-02-2013 à 11:35:08

Je te suggère d'apprendre les bases du CSS, sur le siteduzero par exemple.

Rien ne t'empêche de sortir un élément HTML de son flux...

<header id="top">
<img alt="" width="100%" src="images/top.jpg" />
<div id="contenuHeader">

</div>
</header>

avec :

#top {
width:100%;
position:relative;
}

#contenuHeader{
position:absolute;
left:0;
top:0;
}

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 26-02-2013 à 11:40:02

j'aurai aussi pu le faire comme ça
je vais tester

Reply

Marsh Posté le 26-02-2013 à 12:00:10

c'est pas que je n'ai pas les bases c'est que je me suis dit que s'il existe un background-image c'est pas pour rien et donc que je n'ai pas pensé à la solution que tu m'as donné (qui me parait plus barbare qu'un simple background-image)

mais grace à cette soluce ça fonctionne

merci :hello: