Discussion :

[cyrpio]

Bonjour à tous,

Je ne sais pas programmer en CSS et je ne sais même pas comment différencier les CSS.
Mais, j'ai besoin d'aide car je n'arrive pas à mettre une image en arrière plan sur mon site et je n'ai pas beaucoup de temps...
J'ai essayé plein de chose, je vois mon image dans la prévisu mais pas sur le site.

Voici ce que j'ai mis dans le programme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
/* Classe pour modifier le fond de page */
 
body, body.shrink {
 
    background: #CECECE;
    padding-top: 44px;
    font-weight: 400;
    background-image: <p><img style="width: 100%; float: none;"src="/public/assets/icon/visuel-impression.jpg"></p> no-repeat center fixed;
    background-color: grey;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

De base, je ne pouvais agir QUE sur la couleur de fond, mais je souhaites faire apparaitre une image.

Est ce que quelqu'un peut m'aider ?

Cordialement,
Cyril

[kevin254kl]

Hello,

Si vous regardez la documentation de https://developer.mozilla.org/en-US/...ckground-image background-image ne prend pas une balise html mais l'url.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
body, body.shrink {
background: #CECECE;
padding-top: 44px;
font-weight: 400;
background-image: url="public/assets/icon/visuel-impression.jpg";
background-color: grey;
background-repeat: no-repeat;
background-position: center;
background-size: cover
}

L'url dépend de l'emplacement du fichier donc à adapter

[cyrpio]

Super, merci ça fonctionne.

Par contre, lorsque que je mets en jpg, l'image est plus grande que l'écran, et quand je met en png, elle est plus petite.
Comment je fais pour qu'elle s'adapte à l'écran ?

Je pensais qu'avec : "background-size: cover" ça suffisait.

Cyril

[kevin254kl]

Pour que l'image soit full width et full height

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
width: 100vw;
  height: 100vh;

Il y a aussi image-set si vous avez deux versions pour des résolutions différentes https://developer.mozilla.org/fr/doc...mage/image-set

[cyrpio]

Les 2 lignes se placent n'importe où ?

[NoSmoking]

Bonjour,
ces deux déclarations correspondent à la dimension du background, soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
element {
  background-size: 100% 100%;
}

dans ce cas attend toi à des déformations de l'image de fond suivant la dimension du conteneur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
background-size: cover;
background-position: center;

semble quand même plus indiqué