Sujet Précédent Sujet Suivant

Une image en backgroud s'adaptant aux différents formats d'écran

Fermé
freemast Messages postés 12 Date d'inscription mercredi 16 janvier 2013 Statut Membre Dernière intervention 12 décembre 2013 - 11 déc. 2013 à 16:25
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 13 déc. 2013 à 00:33
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


A voir également:

3 réponses

Réponse 1 / 3
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
11 déc. 2013 à 16:27
Hello,

Regarde du côté de CSS et background-size. A vue d'oeil un "background-size: contain" devrait répondre à ton problème.

++
0
Réponse 2 / 3
freemast Messages postés 12 Date d'inscription mercredi 16 janvier 2013 Statut Membre Dernière intervention 12 décembre 2013
11 déc. 2013 à 16:55
Merci, j'ai déjà regardé mais ça ne fonctionne pas....
0
Réponse 3 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 11/12/2013 à 18:11
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
0
freemast Messages postés 12 Date d'inscription mercredi 16 janvier 2013 Statut Membre Dernière intervention 12 décembre 2013
11 déc. 2013 à 17:38
Merci beaucoup, je vais essayer cette solution
0
oduesp
Modifié par oduesp le 11/12/2013 à 18:24
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).
0
freemast Messages postés 12 Date d'inscription mercredi 16 janvier 2013 Statut Membre Dernière intervention 12 décembre 2013
11 déc. 2013 à 18:25
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>
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
11 déc. 2013 à 18:54
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 {}
0
freemast Messages postés 12 Date d'inscription mercredi 16 janvier 2013 Statut Membre Dernière intervention 12 décembre 2013
11 déc. 2013 à 19:22
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.
0