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

freemast Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 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:

Une image en backgroud s'adaptant aux différents formats d'écran
Double ecran - Guide
Capture d'écran whatsapp - Accueil - Messagerie instantanée
Image iso - Guide
Légender une image - Guide
Comment mettre une vidéo en fond d'écran - Guide

3 réponses

Réponse 1 / 3

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

Hello,

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

++

Réponse 2 / 3

freemast Messages postés 12 Date d'inscription Statut Membre Dernière intervention

Merci, j'ai déjà regardé mais ça ne fonctionne pas....

Réponse 3 / 3

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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

freemast Messages postés 12 Date d'inscription Statut Membre Dernière intervention

Merci beaucoup, je vais essayer cette solution

oduesp

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).

freemast Messages postés 12 Date d'inscription Statut Membre Dernière intervention

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>

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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 {}

freemast Messages postés 12 Date d'inscription Statut Membre Dernière intervention

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.

Discussions similaires

PIX

Dechiffrer une image caché

Votre réponse

Discussions similaires