Ajuster la dimension de l'image background [Résolu/Fermé]

Signaler
Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
-
RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
-
Bonjour,

Je travaille en xhtml et css.

Je souhaite faire en sorte que l'image de fond s'ajuste a la taille de l'écran en fonction de chaque navigateur automatiquement plutôt que de lui indiquer une taille précise qui ne conviendra pas toujours.

Quelqu'un pourrait-il me guider?

Merci par avance

lucy

10 réponses

Messages postés
294
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
17 février 2016
8
touche pas le backgournd plutôt
donne une largeur a la balise Body

body
{
width:100% 
}
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 86899 internautes nous ont dit merci ce mois-ci

Messages postés
294
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
17 février 2016
8
tu vois votre image a un petit dimension 100*750 pour un grande résolution de pc donc ta 1 seul choix pour ajuster la taille d'image sur une grande résolution de pc
tu enlève
 background-repeat:no-repeat; 
pour que le pc génère la partie vide du fond mais
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 86899 internautes nous ont dit merci ce mois-ci

Messages postés
3549
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
438
Voici un code que je viens de tester:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Background</title>
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div#bg{position: fixed;top: 0px;left: 0px;z-index:-5;height: 100%;width: 100%;}
div#bg img{width: 100%;}
div#container{width: 800px;background: #fff;position: absolute;top:20px;left: 50%;margin-left: -400px;}
</style>
</head>
<body>

<div id="bg">
<img src="images/background.jpg" alt="" >
</div>

<div id="container">
<p>Voici Comment ça marche !!</p>
</div>
</body>
</html>


L'image prends automatiquement la largeur totale de l'écran, sans être déformé.
Si tu veux déplacer l'image dans l'écran, modifie top: 0px;left: 0px; dans div#bg.
L'image reste fixe dans l'écran avec un scroll sur la page.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 86899 internautes nous ont dit merci ce mois-ci

Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
1
Avec ton code ça donne ça sur ma feuille style.css mais aucun changement mon image n'est toujours pas aux dimensions de l'écran voir : http://www.perigordgite.fr/

body
{
width:100%;
background-image: url(images/image_de_fond_accueil.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
}

Es-ce que j'ai fait une erreur de synthaxe?
Messages postés
294
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
17 février 2016
8
sinon si tu veut pas que la partie vide remplie par du répétition ta que inséré la fond dans le code html puis définis une width ,c mieux je la trouve

<body>
<img src="images/image_de_fond_accueil.jpg" width="100%">
</body>
Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
1
Merci c'est beaucoup^mieux : >>> www.perigordgite.fr

Il y a tout de même quelque chose qui me dérange, maintenant l'image descend trop bas, il y a besoin du curseur pour aller jusqu'en bas! Comment la rétrécir (garder sa largeur mais diminuer sa hauteur)?
Messages postés
294
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
17 février 2016
8
d'abord enlève une fond ta mis 2 fond sur la page enlève celle dans du CSS
pour la hauteur ta page est vide donc ya que l'image du fond qui la grandir
tu peut faire ca
tu donne une hauteur 100% pour la balise img
<img src="images/image_de_fond_accueil.jpg" width="100%" height="100%">  

Messages postés
213
Date d'inscription
lundi 25 mai 2009
Statut
Membre
Dernière intervention
21 mars 2019
1
merci bcp!!! c'est bon pour moi
up bonjour j'ai le meme probléme,merci de votre aide

(ps : les réponses précédentes n'apparaissent pas )
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1 308