Ajuster la dimension de l'image background
Résolu
bluenette
Messages postés
213
Date d'inscription
Statut
Membre
Dernière intervention
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
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
A voir également:
- Css background-image ajuster taille
- Comment réduire la taille d'un fichier - Guide
- Reduire taille image - Guide
- Image iso - Guide
- Afficher taille dossier windows - Guide
- Taille 32x32 correspondance - Forum Windows
10 réponses
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
tu enlève
background-repeat:no-repeat;pour que le pc génère la partie vide du fond mais
Voici un code que je viens de tester:
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.
<!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
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?
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)?
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 )
(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
Regarde ces reponses
https://forums.commentcamarche.net/forum/affich-24106746-inserer-une-seule-image-sur-son-site