Probleme répétition background

**Spleener** · 28/02/2009, 15h19

Bonjour/bonsoir,

Je suis débutant, et j'ai un souci avec la répétition de mon background :
Mon image de bordure fait 400px de hauteur, j'aimerais ajuster la taille du div automatiquement pour qu'il soit un multiple de 400px, afin que ma bordure du corps du texte soit adapté avec mon pied de page.
Est-ce que c'est possible ?

Une image pour clarifier mon probleme :

Actuellement, le CSS de mon corps est le suivant :

Code css :

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

1
2
3
4
5
6
7
8
9
10
#wrap {
	width: 970px;
	height:auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-left: 130px;
	background-color: white;
	background-image: url(images/bordmil.png);
}

et celui de mon pied de page celui qui suit :

Code css :

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

1
2
3
4
5
6
7
8
#footerimg {
	width: 970px;
	background: white url(images/footer.png);
	height:156px;
	margin-right: auto;
	margin-left: auto;
	padding-left: 130px;
}

Merci de votre aide

**Neroptik** · 28/02/2009, 18h32

Bonjour,

Héhé tu veux le beurre et l'argent du beurre

ca va pas être si facile

.
Tu a une solution qui consiste à avoir un script JS qui se lance sur le onLoad de ton html qui va redimensionner ta div pour quelle soit un multiple de 400.

Sinon en CSS pure ca va se corser, il faut que tu gere un autre découpage pour que la zone répétée soit quelquechose qui se répète en hauteur donc généralement on va utilisé une image de 1px d'épaisseur pour justement n'avoir aucun problemes à la répétition.

**Neroptik** · 28/02/2009, 18h39

Je verrai bien quelque chose comme ça :

**Spleener** · 01/03/2009, 02h50

Tout d'abord, merci de ton aide.

J'ai déja pensé à cette deuxième solution...
Mais ce n'est pas ce que je m'étais fixé, quitte à essayer de bidouiller quelque chose en JS, je vais essayer de voir ce que je peux faire... Et au pire des cas, c'est celle que j'utiliserai.
Si j'ai donc bien compris, ce n'est donc pas possible en CSS. Merci tout de même, bonne fin de weekend

.

Edit : Si une âme charitable s'y connaissant en Javascript pouvait m'aiguiller sur quelque chose de plus précis concernant le redimensionnement de div...
car je ne trouve pas la notion "hauteur modulo 400px" en JS, de ce que j'ai pu trouver de mes maigres recherches.
Merci encore.

**Spleener** · 15/04/2009, 12h42

Bonjour,
J'ai mis du temps, mais bon, au final ça marche :

(En Javascript : )

(Dans le head)

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	function resize()
      {  
		var wrapdiv = document.getElementById("wrap");
		var wrap = document.body.parentNode.scrollHeight;  
		var wrapsup = wrap % 400;
		var wrapok = (wrap - wrapsup);
 
 
 
		document.body.style.height = wrapok + "px";
		wrapdiv.style.height = wrapok + "px";
 
	}

(dans le body)

Code html :

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

1
2
 
<body onload="resize()" onresize="resize()">

Et le tour est joué !

Probleme répétition background

CSS

Vue hybride

Discussions similaires

Partager

Partager