background-image avec grid

**zool.bzh** · 07/02/2024, 21h39

Bonjour

j'ai divisé ma page en trois avec du grid mais je n'arrive pas à mettre une image en arrière plan pour la 2nde partie

voici mon code :

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
<html>
  <head>
    <title> Le 9eme Cercle
    </title>
<link href="css/closty.css" rel="stylesheet" type="text/css" />
 </head>
  <body>
 
    <div class="clo">
 
    <div class="onex">Un</div>
 
    <div class="twox" id="bg9">Deux</div>
 
    <div class="threex">Trois</div>
 
  </div>
</body>
</html>

le closty.css

Code :

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
* {
  box-sizing: border-box;
}
.clo {
 width: 810px;
 }
.clo > div {
  border: 1px solid #666666;
  color: #d9480f;
 }
.clo {
  display: grid;
  grid-template-columns: 3 auto;
  grid-auto-rows: minmax(100px, auto);
}
.onex {
  width:195px;
  grid-column: 1 / 2;
  grid-row: 1;
}
.twox {
  width: 400px;
  grid-column: 2 / 3;
  grid-row: 1;
}
.threex {
  width:195px;
  grid-column: 3 / 3;
  grid-row: 1;
}
#bg9 {
  background-image: url("pics/9bg.png");
  background-color: transparent;
  background-repeat: no-repeat;
 }

**labarre2002** · 08/02/2024, 15h58

bonsoir

je suis pas sur de bien comprendre

j'ai divisé ma page en trois avec du grid

tu veux dire que tu as crée une grille de trois céllules !!!

je n'arrive pas à mettre une image en arrière plan pour la 2nde partie

la seconde partie ??? dois je comprendre le background
de la page ou les autres celllules ?

en reprenant ton code j 'ai ça:

Nom : bg.jpg
Affichages : 194
Taille : 34,3 Ko

Nom : bg.jpg
Affichages : 194
Taille : 34,3 Ko

**zool.bzh** · 08/02/2024, 18h34

salut labarre2002

une image en arrière plan sur -> <div class="twox" id="bg9">Deux</div> avec

Code :

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

1
2
3
4
5
#bg9 {
  background-image: url("pics/9bg.png");
  background-color: transparent;
  background-repeat: no-repeat;
 }

ou un autre moyen je sais pas

**labarre2002** · 08/02/2024, 18h42

Code css :

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

1
2
3
4
5
6
7
#bg9 {
  background-image: url("pics/9bg.png");
  background-size:.... ;
  background-position:..... ;
  background-attachment:.... ;
  background-repeat: no-repeat;
 }

**unanonyme** · 11/02/2024, 15h59

bonjour,

quand vous utilisez pics/9bg.png, l'url est dite relative, car il n'y a pas de barre oblique de préfixe.

La stratégie de résolution est décrite dans la documentation de la fonction url()
https://developer.mozilla.org/fr/docs/Web/CSS/url

Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style ...

Comme la feuille de style de votre page /demo/backg/demo1.phpest hébergée à l'url relative closty.css,
l'url absolue de votre feuille de style est /demo/backg/closty.css,
ainsi l'url de l'image pics/9bg.png résout à /demo/backg/pics/9bg.png

Sinon, vous pourriez considérer background-size: contain; ou background-size: cover;ou une des propositions décrite ici
https://developer.mozilla.org/en-US/...ackground-size

bonne journée.

**zool.bzh** · 12/02/2024, 16h24

ok merci pour l'url relative et absolue je suis arrivé à mes fins

Merci labarre2002

background-image avec grid

Grille CSS (CSS Grid)

Vue hybride

Discussions similaires

Partager

Partager