Intégration d'un fond HTML en %tage
Utilisateur anonyme
-
bg62 Messages postés 23433 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 23433 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'ai codé une page en HTML et je souhaiterais que l'image de fond prenne des largeurs proportionnelles à l'écran sur chaque ordi.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="https://www.pagesjaunes.fr/" />
<title>Portail</title>
<style type="text/css">
<!--
body {
background-image: url(images/fond_portail.png);
background-repeat: repeat-y;
background-position:center;
background-position:top;
background-attachment:fixed;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #AEB1B3; #69F
}
a:link {
color: #06F;
}
a:visited {
color: #06F;
}
a:hover {
color: #00F;
}
a:active {
color: #06F;
}
-->
</style></head>
</script>
<script type="text/javascript" src="date_heure.js"></script>
</head>
<br /><br />
<body>
<span id="date_heure"></span>
<script type="text/javascript">window.onload = date_heure('date_heure');</script>
</body>
-------------------------------------------------------------------------------
Je souhaite également intégrer des icônes cliquables sur cette image de fond.
Y'a-t-il un code particulier pour que le images se placent correctement sur toutes les dimensions d'écrans ?
Merci de votre aide
J'ai codé une page en HTML et je souhaiterais que l'image de fond prenne des largeurs proportionnelles à l'écran sur chaque ordi.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="https://www.pagesjaunes.fr/" />
<title>Portail</title>
<style type="text/css">
<!--
body {
background-image: url(images/fond_portail.png);
background-repeat: repeat-y;
background-position:center;
background-position:top;
background-attachment:fixed;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #AEB1B3; #69F
}
a:link {
color: #06F;
}
a:visited {
color: #06F;
}
a:hover {
color: #00F;
}
a:active {
color: #06F;
}
-->
</style></head>
</script>
<script type="text/javascript" src="date_heure.js"></script>
</head>
<br /><br />
<body>
<span id="date_heure"></span>
<script type="text/javascript">window.onload = date_heure('date_heure');</script>
</body>
-------------------------------------------------------------------------------
Je souhaite également intégrer des icônes cliquables sur cette image de fond.
Y'a-t-il un code particulier pour que le images se placent correctement sur toutes les dimensions d'écrans ?
Merci de votre aide
3 réponses
-
Salut !
Bonne nouvelle, j'ai la solution qu'il te faut !
Regarde du côté de la balise cover en css.
Exemple :
background:url("monfond.jpg") no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
+ 1 si t'aimes !
-
-
-
-
effectivement :
https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php#source-code
pas mal du tout ;)
-
-
Pour régler en fonction des différentes tailles d'écran, tu dois travailler en % au lieu de px
-
J'ai codé une page en HTML et je souhaiterais que l'image de fond prenne des largeurs proportionnelles à l'écran sur chaque ordi.
si ton fond (image en png) peut supporter visuellement la déformation ... faisable, sinon il faut en respecter les proportions quand même ;)
