L'image du background ne s'affiche pas comme je souhaite.

**encoremoi21258** · 15/11/2020, 13h27

Bonjour,

Sur mon site je souhaite que l'image de background prenne toute la place visible et soit fixe, et bien sûr s'adapte à la largueur de l'écran, et bien sûr qu'elle s'affiche en entier sans que le bas ne soit coupé.

J'ai alors réalisé une image de 2048x1152 pixels.

Voici le test:
https://codepen.io/jejedu67/pen/oNLmOON

Comme vous pouvez le constater, l'image prend bien la largueur disponible, mais il y a plusieurs problèmes:
1) Si je réduis la largueur de la fenêtre l'image se réduit mais à un moment elle cesse de se réduire et du coup la partie droite est coupée.
2) Le bas de l'image est coupé, voici l'image originelle: https://cjoint.com/doc/20_11/JKplXWMvzmv_pp.png

Sauriez vous les paramètres à mettre au niveau du CSS ?
Merci d'avance

**mathieu** · 15/11/2020, 14h08

si vous voulez que le bas de l'image s'affiche en priorité, essayez en rajoutant cela :

Code :

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

background-position : bottom;

**encoremoi21258** · 15/11/2020, 16h33

Donc il est impossible de faire en sorte que le haut et le bas s'affichent sur l'écran avec le background en position fixed?

**johanpetrikovsky** · 15/11/2020, 18h01

Bonjour,
Il serait peut-être intéressant de faire des images différentes en fonction de la largeur de l'écran cela éviterait à l'utilisateur de télécharger une image trop grande.

**NoSmoking** · 16/11/2020, 18h31

Bonjour,
au vue de ton image de fond je séparerais les différents « motifs », fond, personnages de gauche, personnage de droite ...

Avec ses images il y a moyen de créer un background composé de plusieurs images qui dans ton cas seraient dimensionnés suivant ton besoin.

Exemple de ce que l'on peut faire :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background multi-images</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2095955">
<style>
html,
body {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  background-image:
    url("http://pngimg.com/uploads/viking/viking_PNG2.png"),                            /* image de premier plan */
    url("http://pngimg.com/uploads/viking/viking_PNG32.png"),
    url("http://pngimg.com/uploads/viking/viking_PNG40.png"),
    url("https://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_cours_css.gif");  /* image de dernier plan */
  background-position: left bottom,right bottom,right top,top left;
  background-repeat: no-repeat,no-repeat,no-repeat,repeat;
  background-size: auto 20%,auto 20%,contain,auto;
  background-attachment: fixed;
}
@media(orientation:landscape) {
  body {
    background-size: 20% auto,20% auto,auto,auto;
  }
}  
</style>
</head>
<body>
<p>Image issues de http://pngimg.com/imgs/people/viking/
</body>
</html>

Ensuite à toi de déterminer les différentes dimensions des images de tes personnages, attendu que la taille de l'écran peut varier mais que le rapport hauteur/largeur peut être également inversé.
Pour ce dernier point tu peux te servir des Media Querieset notamment l'orientation, comme approché dans l'exemple.

L'image du background ne s'affiche pas comme je souhaite.

CSS

Discussions similaires

Partager

Partager