[RESOLU]Dimensions background image

Bonjour :

j'essaye de limité la dimension a l'affichage d'une image d'arriere plan dans un div ..

je m'explique ..

j'ai un div de 240*180
dans lequel je veux mettre une image qui fait 240*186 en background
ça modifie la dimension de mon div ...

mon css

.bloc-tof-gd {
height: 180px;
width: 240px;
float: left;
*/ j'ai testé aussi */
max-height:180px;
max-width:240px;
}

mon html

<div class="bloc-tof-gd" style="background-image:url(../img/maxi/<?php echo $img_ann;?>)"><img src="../img/cadre-photo-grande.gif" alt="test" /></div>

et le rendu :


merci a ceux qui essayerons
Modifié par camyo (26 Mar 2008 - 14:40)

Salut,

ne devrais-tu pas t'y prendre dans l'autre sens? Car ici concrètement si le css est désactivé on ne voit que le cadre et pas l'image...

c'est vrais ..

mais quitte a passer pour un boulet ..

comment mettre un cadre image en premier plan ?

Il faut positionner deux divs l'une par dessus l'autre.

On crée une div qui va contenir l'image et le cadre :

<div class="containerImgEtCadre">
<img src="cheminVersLimage" alt="texte alternatif"/>
<div class="cadre"></div>
</div>

Ensuite côte CSS on taille le conteneur et on spécifie que tout se qui dépasse est caché, puis on vient placer le cadre en absolute en top 0 et left 0 (mais comme son élément parent est en position relative ce sera par rapport a lui et pas par rapport au body)

.containerImgEtCadre{
position : relative;
width : 240px;
height : 180px;
overflow : hidden;
}
.containerImgEtCadre .cadre{
position : absolute;
top : 0px;
left : 0px;
width : 240px;
height : 180px;
background : url(url-du-cadre) top left no-repeat;
}

ou avec les marges négatives ce qui évite d'utiliser les positionnements relative et absolute.

.containerImgEtCadre{
width : 240px;
height : 180px;
overflow : hidden;
}
.containerImgEtCadre .cadre{
margin-top : -180px;
width : 240px;
height : 180px;
background : url(...) top left no-repeat;
}

voila je t'avoue que je n'ai pas testé mais ça devrais pouvoir te donner des pistes de reflexions...

je test de suite ...

Merci

ça marche le résultat est beaucoup plus concluant

je note comme résolu