Discussion :

[jmde]

Bonsoir,

Sur une page html je voudrais superposer deux images
la première à un fond gris avec les angles arrondis la
deuxième à un fond transparent.

Est-ce possible, et comment ?

Merci pour votre aide.

Salutations.


Css

Code :

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

1
2
3
4
5
6
7
8
9
.medaille-distinction {
    margin-top:7%;
    margin-left:35%;
    width:250px;
    height:175px;
    color: #000080;
    padding-bottom:8%;
    padding-right: 1%;
}

Html

Code :

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

1
2
3
<div class="medaille">
<img src="CadrePhoto.bmp" width=250 height=175/>
</div>

2ème image :
<img src="../Photo/Claude -1.png"

[Invité]

Code :

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

1
2
3
4
5
6
7
8
9
10
.medaille-distinction {
    margin-top:7%;
    margin-left:35%;
    width:250px;
    height:175px;
    color: #000080;
    padding-bottom:8%;
    padding-right: 1%;
    background-image: url(CadrePhoto.bmp);
}

Code :

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

1
2
3
<div class="medaille-distinction">
<img src="../Photo/Claude -1.png" width="250" height="175" alt=""/>
</div>

[jmde]

Bonjour jreaux62,

Merci pour ta réponse je l'essaye de suite.

Salutations

[Macmillenium]

Bonjour,

Si tu ne veux pas que ton fond se répète :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.medaille-distinction {
    margin-top:7%;
    margin-left:35%;
    width:250px;
    height:175px;
    color: #000080;
    padding-bottom:8%;
    padding-right: 1%;
    background-image: url(CadrePhoto.bmp);
    background-repeat: no-repeat;
}

[jmde]

Bonjour,

J’ai utilisé ce que j’ai appris dans le post "Positionnement dans une page"
mais j’ai un problème de centrage des photos Png qui ont un format de 150x113 et que l’image de fond fait 250x175.

Merci pour votre aide.

Salutations

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
#conteneur {
    margin-top:7%;
    text-align:center;
}
 
 .Ma1erImg {
    display:block;
    margin:4% auto 0;
    background-image: url(CadrePhoto.bmp);
    background-repeat: no-repeat;
}
 
.conteneurImg {
    margin-top:2%; /* Un peu d'espace entre le conteneur des img */
}
 
.conteneurImg img {
    background-image: url(CadrePhoto.bmp);
    background-repeat: no-repeat;
}

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
<div id="conteneur">
    <img class="Ma1erImg" src="Photos-1.png" width="150" height="113" alt="" />
 
<div class="conteneurImg"> 
    <img src=" Photos-2.png" width="150" height="113" />
    <img src=" Photos-3.png" width="150" height="113" />
    <img src=" Photos-4.png" width="150" height="113" />
</div>
 
<div class="conteneurImg">
   <img src=" Photos-5.png" width="150" height="113" />
   <img src=" Photos-6.png" width="150" height="113" />
   <img src=" Photos-7.png" width="150" height="113" />
</div>
 
<div class="conteneurImg">
   <img src=" Photos-8.png" width="150" height="113" />
   <img src=" Photos-9.png" width="150" height="113" />
<img src=" Photos-10.png" width="150" height="113" />
 
<div class="conteneurImg">
   <img src=" Photos-11.png" width="150" height="113" /> 
</div>
</div>