Ajuster la dimension de l'image background
Résolu
bluenette
Messages postés
224
Statut
Membre
-
RAD ZONE Messages postés 5362 Statut Contributeur -
RAD ZONE Messages postés 5362 Statut Contributeur -
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
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
-
touche pas le backgournd plutôt
donne une largeur a la balise Body
body { width:100% } -
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èvebackground-repeat:no-repeat;
pour que le pc génère la partie vide du fond mais -
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. -
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%">
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
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? -
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>
-
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)? -
-
up bonjour j'ai le meme probléme,merci de votre aide
(ps : les réponses précédentes n'apparaissent pas ) -
salut
Regarde ces reponses
https://forums.commentcamarche.net/forum/affich-24106746-inserer-une-seule-image-sur-son-site
