1481 sujets

Web Mobile et responsive web design

Background-image et height

Bonjour à tous Smiley smile

Vous êtes mon dernier espoir !

J'ai un background-image que je redimensionne avec 


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


mon code html5 :


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


quand je redimensionne, mon image en background suit mais le height reste comme sur l'image
upload/1890-zero.jpg

j'ai tenté un 


header {
height:100%;
}


mais ça ne fonctionne pas

quelqu'un aurait il une idée?

merci Smiley lol
Page de test en ligne ? (éventuellement ton code...)
Essais déjà effectués ? (cover au lieu de contain, etc...)
Recherches effectuées sur le net ?
Sur combien de forum tu poses la même question ?
désolé mais c'est pas le même problème
et oui je cherche en parallèle sur le net
je fais des tests de mon coté
j'attends pas devant ma boite mail en rechargeant toutes les 10 secondes pour savoir si on m'a répondu....
ps : le problème énoncé dans mon ancien post est que je n'arrivais pas à redimensionner l'image
maintenant c'est ok et le nouveau problème est décrit sur mon premier message de ce post
Soit. Le cross-posting a des aspects bien agaçants, mais passons...
Donc :
Page de test en ligne ? (éventuellement ton code...)
Essais déjà effectués ? (CSS, JavaScript, PHP,...)
Solutions à privilégier ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="responsive.css" />
<meta name="viewport" content="width=device-width">
<title>HTML5 ARTICLE</title>

</head>
<body>

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

</body>
</html>


j'ai allégé la page

#top {
	background-image:url(images/top.jpg);
	width:1159px; 
	height:223px;
}


puis le code responsive design

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

}
Sujet clos
Aller à