Une image en backgroud s'adaptant aux différents formats d'écran
freemast
Messages postés
13
Statut
Membre
-
animostab Messages postés 3003 Statut Membre -
animostab Messages postés 3003 Statut Membre -
Bonjour à tous,
Je suis débutant dans la création de page pour un site internet.
Quelqu'un aurait il l'amabilité de m'aider. Je vous expose mon désir.
J'aimerais mettre en background une image qui fait toute la largeur de l'écran (centrée horizontalement) et qui occuperait environ les 2/3 verticalement (centrée verticalement) avec une couleur noire en background qui occuperait les parties non recouvertes par l'image.
J'aimerais que cette image s'adapte automatiquement aux différents formats d'écrans (en respectant les proportions de l'image).
Mon image fait 2000 x 1350 px (le format peut être éventuellement adapté)
J'ai cherché sur le web pour résoudre mon problème mais je n'ai pas trouvé de solution qui fonctionne correctement.
Si quelqu'un aurait l'extrême gentillesse de m'écrire le code, j'en serais ravis.
J'utilise Dreamweaver CS6
Un très grand merci par avance.
Eric
Je suis débutant dans la création de page pour un site internet.
Quelqu'un aurait il l'amabilité de m'aider. Je vous expose mon désir.
J'aimerais mettre en background une image qui fait toute la largeur de l'écran (centrée horizontalement) et qui occuperait environ les 2/3 verticalement (centrée verticalement) avec une couleur noire en background qui occuperait les parties non recouvertes par l'image.
J'aimerais que cette image s'adapte automatiquement aux différents formats d'écrans (en respectant les proportions de l'image).
Mon image fait 2000 x 1350 px (le format peut être éventuellement adapté)
J'ai cherché sur le web pour résoudre mon problème mais je n'ai pas trouvé de solution qui fonctionne correctement.
Si quelqu'un aurait l'extrême gentillesse de m'écrire le code, j'en serais ravis.
J'utilise Dreamweaver CS6
Un très grand merci par avance.
Eric
A voir également:
- Une image en backgroud s'adaptant aux différents formats d'écran
- Double ecran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Légender une image - Guide
- Retourner ecran pc - Guide
- Image iso - Guide
3 réponses
Hello,
Regarde du côté de CSS et background-size. A vue d'oeil un "background-size: contain" devrait répondre à ton problème.
++
Regarde du côté de CSS et background-size. A vue d'oeil un "background-size: contain" devrait répondre à ton problème.
++
Bonjour
ce qui s'approche le plus de ce que tu veux c'est ca
dans le fichier CSS tu fais
html {
width:100%;
height:100%;
background-image: url(imagedefond.jpg);
background-position: center;
background-repeat:no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
-ms-background-size: 100% auto;
background-color: #000000;
}
en gras tu met le chemin vers l'image de fond
ne marche pas pour IE8 et inférieur
voila
Un petit merci vaut mieux qu'une grande ignorance
ce qui s'approche le plus de ce que tu veux c'est ca
dans le fichier CSS tu fais
html {
width:100%;
height:100%;
background-image: url(imagedefond.jpg);
background-position: center;
background-repeat:no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
-ms-background-size: 100% auto;
background-color: #000000;
}
en gras tu met le chemin vers l'image de fond
ne marche pas pour IE8 et inférieur
voila
Un petit merci vaut mieux qu'une grande ignorance
Salut, par contre une image de
2000 x 1350 px c'est lourd à charger donc votre site risque d'être lent à afficher.
L'internaute qui le consulte va pas toujours attendre et il quitte votre site où n'y reviendras plus dans les 2/3 des cas.
En général on met un fond qui est léger(et un fond doit pas empêcher de voir le contenu, donc il doit être -dans la plupart des cas- neutre) et on peut utiliser pour qu'il remplisse toute une page ou toute une partie de la page une image légère(quelques px de haut et large) qui se répète horizontalement et verticalement..
Cela est fait en utilisant la propriétés CSS background-repeat
edit: dans le cas de certains appareils mobile: tablette, téléphone l'image ne s'affichera tout simplement pas(en fonction de la mémoire disponible).
2000 x 1350 px c'est lourd à charger donc votre site risque d'être lent à afficher.
L'internaute qui le consulte va pas toujours attendre et il quitte votre site où n'y reviendras plus dans les 2/3 des cas.
En général on met un fond qui est léger(et un fond doit pas empêcher de voir le contenu, donc il doit être -dans la plupart des cas- neutre) et on peut utiliser pour qu'il remplisse toute une page ou toute une partie de la page une image légère(quelques px de haut et large) qui se répète horizontalement et verticalement..
Cela est fait en utilisant la propriétés CSS background-repeat
edit: dans le cas de certains appareils mobile: tablette, téléphone l'image ne s'affichera tout simplement pas(en fonction de la mémoire disponible).
Hello,
Jai essayé cette solution mais aucune image s'affiche, je pense que mon codage ne doit pas être correct, voici le code utilisé:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fond extensible - version CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<style type="text/css">
body,td,th {
color: #FF0;
}
html {
width:100%;
height:100%;
background-image: url(Images/terminal-home.jpg);
background-position: center;
background-repeat:no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-color: #000000;
}
</style>
</head>
<body>
</body>
</html>
Jai essayé cette solution mais aucune image s'affiche, je pense que mon codage ne doit pas être correct, voici le code utilisé:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fond extensible - version CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<style type="text/css">
body,td,th {
color: #FF0;
}
html {
width:100%;
height:100%;
background-image: url(Images/terminal-home.jpg);
background-position: center;
background-repeat:no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-color: #000000;
}
</style>
</head>
<body>
</body>
</html>
déjà mets tout le style dans le fichier style.css (placé à la racine du site) et efface le de la page html
ensuite vérifie le chemin vers l'image evite les nom d'image avec des tirets
appelle ton image home.jpg et mets la dans un fichier nommé Images à la racine du site (Images avec une majuscule)
et fais
background-image: url(Images/home.jpg);
autre chose si tu fais un background-color dans html {} pas besoin d'en faire dans body {}
ensuite vérifie le chemin vers l'image evite les nom d'image avec des tirets
appelle ton image home.jpg et mets la dans un fichier nommé Images à la racine du site (Images avec une majuscule)
et fais
background-image: url(Images/home.jpg);
autre chose si tu fais un background-color dans html {} pas besoin d'en faire dans body {}
Désolé mais mon image ne s'affiche toujours pas. J'ai bien contrôlé le chemin vers l'image, il est correct.
J'ai modifié les codes comme tu m'a demandé...
le HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fond extensible - version CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Le css:
@charset "utf-8";
/* CSS Document */
html {
width:100%;
height:100%;
background-image: url(Images/home.jpg);
background-position: center;
background-repeat:no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-color: #000000;
}
Avec Dreamweaver, en mode création et en direct, je vois l'image qui me semble correspondre à ce que j'aimerais.
J'ai bien contrôlé que tous les fichiers aient bien été transférés sur le serveur de mon site.
J'ai modifié les codes comme tu m'a demandé...
le HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fond extensible - version CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Le css:
@charset "utf-8";
/* CSS Document */
html {
width:100%;
height:100%;
background-image: url(Images/home.jpg);
background-position: center;
background-repeat:no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-color: #000000;
}
Avec Dreamweaver, en mode création et en direct, je vois l'image qui me semble correspondre à ce que j'aimerais.
J'ai bien contrôlé que tous les fichiers aient bien été transférés sur le serveur de mon site.
