[GRID] background avec image repeat

Version imprimable

Salut all,
J'ai un probleme de background dans une des section d'un grid qui affiche bien l'image et en repeat MAIS le background de la section reste fixed meme on scroll.

Code:

1
2
3
4
5
<div class="general">
  <div class="nav_header">xxx</div>
  <div class="nav_data"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
  <div class="nav_footer">xxx</div>
</div>

Code:

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
.general {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 80px 1fr 15px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "nav_header"
    "nav_data"
    "nav_footer";
  height: 100vh;
  overflow: hidden;
}
 
.nav_header {
  justify-self: center;
  align-self: center;
  grid-area: nav_header;
}
 
.nav_data {
  grid-area: nav_data;
  overflow: auto;
  background: url("/images/background.png") repeat;           // <---- ici
}
 
.nav_footer {
  justify-self: center;
  align-self: center;
  grid-area: nav_footer;
}

Alors tout semble ok, le background s'affiche bien, l'overflow aussi ok, les <br /> aussi ok, mais le background nav_data reste fixed (alors que je voudrais qu'il defile par rapport a son contenu)
Ou est mon probleme / erreur ?
Merci par avance.

essayez comme cela avec le contenu dans une balise div "interieur"

Code:

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
38
39
40
41
42
43
44
45
46
47
<div class="general">
  <div class="nav_header">xxx</div>
  <div class="nav_data">
<div class="interieur">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></div>
  <div class="nav_footer">xxx</div>
</div>
 
 
<style>
 
.general {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 80px 1fr 15px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "nav_header"
    "nav_data"
    "nav_footer";
  height: 100vh;
  overflow: hidden;
}
 
.nav_header {
  justify-self: center;
  align-self: center;
  grid-area: nav_header;
}
 
.nav_data {
  grid-area: nav_data;
  overflow: auto;
}
 
.nav_data .interieur {
  background: url("https://upload.wikimedia.org/wikipedia/commons/b/bb/Conan_doyle.jpg") repeat;           // <---- ici
}
 
.nav_footer {
  justify-self: center;
  align-self: center;
  grid-area: nav_footer;
}
 
</style>

16/08/2024, 02h16
Danyel

Merci mathieu (et desole pour le retard de ma reponse ... je suis malade :aie:)
J'ai essaye ton astuce et d'autres du meme genre, qui fonctionnent quand nav_data a beaucoup a afficher et superieur au 100vh du grid.
Mais si nav_data n'a, par exemple qu'une seule phrase ou peu a afficher, l'affichage du background (interieur) s'arrete et ne s'affiche pas jusqu'au bas de la page (header et footer etant sticky top et bottom)
Une autre idee ou solution.
Encore merci et par avance.

en mettant le même fond aux 2 éléments, j'ai l'impression que ça donne l'effet que vous cherchez :

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<div class="general">
  <div class="nav_header">xxx 1</div>
  <div class="nav_data">
<div class="interieur">
a<br />b<br />c</div></div>
  <div class="nav_footer">xxx 1</div>
</div>
 
<hr/>
 
<div class="general">
  <div class="nav_header">xxx 2</div>
  <div class="nav_data">
<div class="interieur">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></div>
  <div class="nav_footer">xxx 2</div>
</div>
 
 
<style>
 
.general {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 80px 1fr 15px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "nav_header"
    "nav_data"
    "nav_footer";
  height: 100vh;
  overflow: hidden;
}
 
.nav_header {
  justify-self: center;
  align-self: center;
  grid-area: nav_header;
}
 
.nav_data {
  grid-area: nav_data;
  overflow: auto;
}
 
  .nav_data .interieur
, .nav_data
{
  background: url("https://upload.wikimedia.org/wikipedia/commons/b/bb/Conan_doyle.jpg") repeat;
}
 
.nav_footer {
  justify-self: center;
  align-self: center;
  grid-area: nav_footer;
}
 
</style>

17/08/2024, 05h23
Danyel

Merci mathieu, je vais regarder ca de plus pres car j'ai aussi un background perpetuel en diagonal et il faut donc que ce soit au pixel pres ;)
Allez encore merci et bon week end.
Je reviens des que possible.

Edit
Bon, effectivement ca a l'air de fonctionner sur toutes les resolutions d'ecran que j'ai pu tester (sauf 2550x1140 et 2560x1600 mais je vois aucune raison que ca deconne)
Me reste a tester sur ios/android et voir si ca fonctionne aussi sur mobiles.

Encore merci Mathieu