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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : responsive design et height qui n'est pas pris en compte

zouille75

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

Publicité

abais

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

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

zouille75

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%;
}
}

abais

Tu as un lien de test ?

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

zouille75

je t'ai envoyé un msg privé

abais

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.

zouille75

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

abais

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.

zouille75

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

zouille75

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:

Publicité

abais

Encore une fois, le background n'influe pas sur le flux

De rien :jap:

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Responsiv design	Créer un site Internet avec un design de qualité
CSS pas toujours prise en compte par IE ?	erreur lors d'excecution pentaho design studio
[RESOLU]page de login avec compte à rebours	Stoper un compte à rebours
Compte à rebour en PHP (if/else) pour masquer lien	Attribution de droit NTFS à un compte admin
height en % (résolu)	possible ou pas? synchro de compte openldap -> active directory
Plus de sujets relatifs à : responsive design et height qui n'est pas pris en compte

Page générée en 0.053 secondes