28172 sujets

CSS et mise en forme, CSS3

Image extensible...

Bonjour à toutes et à tous,

Petite présentation rapide, Guillaume 21ans, passionné de graphisme.

Passons au sujet =)

Je suis entrain de créer un site web, j'ai lu l'astuce permettant de faire une image extensible (ce qui dans mon cas est fort adapté!!) seulement je rencontre un petit problème.

J'ai donc un <div id="back"> qui contient une image <img id="fond" alt="" src="/img/fond.jpg">

La ou cela se corse c'est que #back contient de nombreux autres div, certains flottant d'autres non.

#back à les bonnes dimensions, j'ai pu le vérifier en lui attribuant un background-color:yellow; qui effectivement à la largeur et la hauteur voulu.

Mon image de fond (celle qui doit remplacer le jaune) est d'une hauteur de 1px (c'est un vulgaire dégradé). Le css appliqué est le suivant : 

#back{
	position:absolute;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	height:auto;
	background-color:yellow;
	}

#fond {
	/* l'image occupe toute la place de son bloc conteneur */
	width : 100%;
	height: 100%;
}


Le width:100% fonctionne, correctement, j'ai pu le vérifier en jouant sur le pourcentage de #back mais le height:100% ne fonctionne pas car mon image reste d'1px de haut...

Alors que faire?

Je souhaite que mon dégradé (img=fond.jpg #fond) prenne toute la hauteur de #back qui contient tout les autres div de mon site...

Des idées?
Hello,

Comme tu le dis toi même, il s'agit d'une image de fond et pas d'une image de contenu, la balise <img> n'est pas du tout adaptée à ce que tu veux faire.

Sans trop compliquer les choses, tu pouvais n'utiliser que ton div ayant la couleur de fond jaune et lui ajouter ton image de fond qui se répète en css.

Si j'ai bien compris, ça devrait régler ton problème :


#back{

	position:absolute;

	margin-left: auto;

	margin-right: auto;

	width: 80%;

	height:auto;

	background:yellow url(/*Adresse de ton image,  http://site.com/monimage.jpg*/)  repeat-y 0 0;

	}
Bonjour,

Maki > Le problème de ta solution c'est que c'est un parfait exemple de bidouillage, qu'elle mélange présentation et contenu et force à l'utilisation de positionnement absolu (pas toujours maitrisé par tous).

La meilleurs solution, surtout dans le cas d'un dégradé est celle donnée par CSS Bucherons.
Je ne comprend pas ce que fait "repeat-y 0 0;" je n'ai pas mit mon image en fond, car je souhaite qu'elle s'étire... Je planche sur le white rabbit... la solution est peut être la... Merci de vos réponses.
Sujet clos
Aller à