Sujet Précédent Sujet Suivant

Intégration d'un fond HTML en %tage

Fermé
Utilisateur anonyme - 24 avril 2012 à 22:54
bg62 Messages postés 23654 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 novembre 2024 - 25 avril 2012 à 20:18
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
A voir également:

3 réponses

Réponse 1 / 3
Profil bloqué
25 avril 2012 à 12:09
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 !
4
bg62 Messages postés 23654 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 novembre 2024 2 385
Modifié par bg62 le 25/04/2012 à 14:35
"no-repeat" = on conserve la taille du fichier
donc pas d'adaptation à celle de l'écran .... ;)
???
0
Profil bloqué
25 avril 2012 à 17:06
En principe, mais avec la balise cover ça permet de recadrer l'image à la taille de l'écran.
Ca adapte l'image sans la déformer, ce qui est plutôt sympa.

A tester, je m'en sers souvent, c'est que du bonheur ! (ne pas utiliser d'images trop lourdes évidemment).
0
Utilisateur anonyme
25 avril 2012 à 17:59
Impeccable la balise cover !! Merci :-)
En revanche, j'ai essayé de mettre des marges mais ça ne fonctionne pas. C'est normal ?
0
bg62 Messages postés 23654 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 novembre 2024 2 385
25 avril 2012 à 20:18
effectivement :
https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php#source-code
pas mal du tout ;)
0
Réponse 2 / 3
BeFaX Messages postés 14245 Date d'inscription mercredi 24 décembre 2008 Statut Contributeur Dernière intervention 6 août 2013 3 820
24 avril 2012 à 23:03
Pour régler en fonction des différentes tailles d'écran, tu dois travailler en % au lieu de px
1
Utilisateur anonyme
24 avril 2012 à 23:17
Ici : ?

margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
0
BeFaX Messages postés 14245 Date d'inscription mercredi 24 décembre 2008 Statut Contributeur Dernière intervention 6 août 2013 3 820
24 avril 2012 à 23:28
Ça ce sont les marges.
La largeur c'est Width et la hauteur c'est Height, essaie en rajoutant :

height: 100%;
width: 100%;
0
Réponse 3 / 3
bg62 Messages postés 23654 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 novembre 2024 2 385
25 avril 2012 à 10:24 
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 ;)
1

Discussions similaires

Espace en HTML
baissaoui -
baissaoui -

0 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
Fond d'écran carousel xiaomi
Thomasg -
Albator -

4 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Cellules en surbrillance selon une TextBox
Wyrgle -
jordane45 -

1 réponse