28172 sujets

CSS et mise en forme, CSS3

Un background en avant plan

Salut,

Il te faudra positionner celui-ci en absolu par rapport au conteneur direct ayant un positionnement relatif, en utilisant la propriété css z-index pour le faire passer devant.
Il y a un tutovidéo de graphikart (sur wordpress je crois) qui explique le procédé.
Bonjour,

Merci pour cette reponse rapide, j'ai deja essayer avec z-index, mais sans résultat.

Actuellement le code css correspondant au block de fond est le suivant :


#primary_block #image-block {
background:url("../img/backproduct.gif") no-repeat scroll center top black;
border:1px solid #D0D1D5;
height:265px;
width:297px;
}


Mais après de multiple combinaisons, afin de faire ce que je cherche, rien ni fait.

Merci d'avance de votre aide
Bonjour,

Voir ton code HTML aurait peut-être pu aider, si tu l'as ce serait bien (pour la partie concernée).
Et passer par une image <img> ne pourrait pas être une bonne solution ?
Bonjour,

Le code html, si je me trompe pas devrais être celui ci :

<div id="image-block">
		{if $have_image}
				<img src="{$img_prod_dir}{$cover.id_image}-large.jpg" alt="" id="bigpic" title="{$product->name|escape:'htmlall':'UTF-8'}"/>
		{else}
			<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
		{/if}
		</div>


Merci de votre aide
Bonjour,

Avec z-index ca devrait marcher, si tu sors ton <img> de ton <div> et que tu les positionnes tous les deux en absolute. Penses aussi à mettre ton background en "transparent" et pas "black"
Bonjour,

Même en changeant le css dans ce sens :

#primary_block #image-block {
background:url("../img/backproduct.gif") no-repeat scroll center top black;
border:1px solid #D0D1D5;
height:265px;
width:297px;
position: absolute;
z-index: 2;
}


Le résultat ne change pas.

Merci de votre aide
Essaye plutôt comme ceci : 

#primary_block #image-block { 
    background:url("../img/backproduct.gif") no-repeat scroll center top transparent; 
    border:1px solid #D0D1D5; 
    height:265px; 
    width:297px; 
    position: absolute; 
    z-index: 1; 
}

#primary_block #image-block img  {
    position: absolute;
    z-index: 2;
    /*[...]*/
}
t'as pas du bien lire ce que je t'ai mis plus haut... la balise "<img>" ne doit pas être dans le "<div>"

Ca ca fonctionne :



#image-block { 
background:url("../img/backproduct.gif") no-repeat scroll center top transparent; 
border:1px solid #D0D1D5; 
height:265px; 
width:297px; 
z-index:2;
position:absolute;
} 

img {
position:absolute;
z-index:1;
}





<div id="image-block"></div>
<img src="ton image" alt="" title=""/>
Bonjour,

JuJu57 => aucuns résultat

513 => en modifiant le div, cela me positionne l'image en dehors du cadre.

Merci de votre aide.
ouais mais après à toi d'ajuster la css pour que ca s'affiche comme tu veux en fonction du reste de ta page. Dans tous les cas, c'est avec z-index que tu pourras faire ce que tu veux.
Bonjour,

j'avais deja essayer avec les différentes possibilités

z-index
position:absolute

Mais sans avoir de succès.

Dur dur, cette histoire qui paraissait si simple.
Sujet clos
Aller à