[css] background image

Résolu/Fermé
Signaler
-
Messages postés
2
Date d'inscription
jeudi 5 février 2015
Statut
Membre
Dernière intervention
11 février 2015
-
Bonjour,

J'aurais juste besoin de savoir s'il est possible d' "obliger" une image de fond (background-image) à se proportionner de façon a remplir la totalité du fond de la page.
Merci d'avance de vos réponses
Isa

16 réponses

Messages postés
1288
Date d'inscription
dimanche 21 septembre 2008
Statut
Contributeur
Dernière intervention
17 mars 2017
843
background-image: url(./images/background.jpg); 
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) > CSS3 */
73
Ca ne fonctionne pas lorsqu'ont regarde le site sur un Ipad...le fond ne s'ajuste pas ? avez-vous la réponse ? Merci
0
bonne question de STEF

Quel script permet de switché sur un IPAD SCREEN ?

(ma question est un peu mal posée je vous l'avoue)
0
Messages postés
1288
Date d'inscription
dimanche 21 septembre 2008
Statut
Contributeur
Dernière intervention
17 mars 2017
843
@stef & doneydjeu utilise les instructions de sélection conditionnelles des feuilles de style selon la taille des écrans.
0
Franchement merci :)
0
Messages postés
1
Date d'inscription
lundi 26 mars 2012
Statut
Membre
Dernière intervention
26 mars 2012
39
Bon, en attendant, c'est fini de se prendre la tête:
background-image: url(images/monimage.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
et le tour est joué.
Valable pour ie, chrome, safari, firefox...
39
Houla! Bonjour la science!!!
La propriété background-size est une propriété CSS3 seulement implémentée par les navigateurs de dernière génération et pour le reste, alléger une feuille de style est très bon pour la bande passante hébergeur :
background: url(images/monimage.jpg) no-repeat fixed;
0
+1 c'est le plus simple, la meilleure solution !!
0
+1 aussi exactement ce que je cherchais ;) !!!!
0
merci drann!
0
Messages postés
7
Date d'inscription
mercredi 8 décembre 2010
Statut
Membre
Dernière intervention
6 juillet 2013
1
top merci beaucoup sympa de partager!
0
Euh du javascript pour ce genre de chose est inutile vous pourrez trouver la solution avec uniquement du CSS ici:
https://www.reussir-mon-ecommerce.fr/
21

Bonjour,


Pour mettre une image de fond en plein écran y a toujours moyen d'écrire ça (tout de suite après la balise <body>) :

<img src="cequetuveux.jpg" width=100% height=100% style="position: absolute">
11
Et pour la bar de défilement ? L'image reste en haut et on voie le blanc en dessou :/
0
Messages postés
406
Date d'inscription
mardi 5 juin 2012
Statut
Membre
Dernière intervention
8 mai 2020
83
Comment faire pour que le texte soit sur l'image stp ??
0
Salut.

Moi je n'aime pas trop la solution de truthlesslife : ça déforme l'image.

Pour avoir une image de fond qui s'adapte à la taille de la fenêtre tout en conservant ses proportions largeur/hauteur, il faut avoir recours au javascript.

Il existe des scripts tout prêt pour ça : https://reactdom.com/restful-api/
9
La solution que je donne plus haut (uniquement css) ne déforme pas du tout l'image (vous pouvez voir la démo).
0
supersized est cool dans le genre : http://buildinternet.com/project/supersized/
0
Messages postés
4
Date d'inscription
vendredi 18 novembre 2011
Statut
Membre
Dernière intervention
30 novembre 2011
8
Le problème si tu utilises css background c'est que si ta page n'est pas fixe en taille tu ne vas pas pouvoir redimensionner l'image de fond.

Contrairement au design en print la taille d'une page web n'est pas fixe. Pour résoudre ce problème on utilise souvent une div à taille fixe sur laquelle on applique l'image de fond.
6
bonjour
cest exactement le problème que je voulais résoudre: mettre limage de background full screen
le truc de truthlesslif et/ou de alsacreations sont exactemen ce quil faut faire

merci
5
Oui mais ça ne répond pas à la question.
En plus tu te trompes. Etirer une photo c'est moche, certes, mais si tu as des fonctions spéciales, ça peut être utile d'étirer l'image de la taille X, où X est une variable.
Par exemple pour des votes ou des statistics.
Bref, j'ai justement le même problème que Isa et j'aimerais bien une réponse si quelqu'un sait y répondre.

Merci
4
Messages postés
85
Date d'inscription
mercredi 10 juin 2009
Statut
Membre
Dernière intervention
17 août 2009
18
bonjour pouvez vous m'expliquez comment crée des images background pour css
4
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
Bonjour,

On parle de ça dans cette discussion.

 --
1
Messages postés
60
Date d'inscription
lundi 18 novembre 2013
Statut
Membre
Dernière intervention
7 novembre 2018
1
je pense que ça marche
1
Essayez avec :
background-attachment: fixed !important;

il semble que ça résous le probleme
1
Messages postés
261
Date d'inscription
mardi 22 octobre 2013
Statut
Membre
Dernière intervention
22 mars 2017
50
Waw ! Sujet lancé en 2005 ! :-P
1
Messages postés
2
Date d'inscription
jeudi 5 février 2015
Statut
Membre
Dernière intervention
11 février 2015
1
background: url(../images/index0.jpg) no-repeat center fixed;
background-size: cover;
1
ça va être assez dégueulasse...

mieux vaut prévoir une image de la taille de ta page (et donc fixer en dur la taille de cette page) ou alors utiliser une image-motif qui va se répéter...
-1
oui mais en faisant ca tu t interdit de pouvoir modifier limage de fond en fonction du style de page que tu affiche
-1
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
Je n'ai pas lu ça dans la question d'origine.
Tu as des lunettes spéciales ?

Cependant, on peut placer l'image à l'aide d'un script qui se déclenche au chargement de la page en précisant une source différente à chaque fois.

--
0
vas voir ici (je crois)
http://foyerdj.freeheberg.com/
0
Essayez avec
background-attachment: fixed !important;

il semble que ça résous le probleme
0