28172 sujets

CSS et mise en forme, CSS3

[Résolu] Superposition background et border

Bonjour à tous !

Je suis en train d'intégrer un site web pour lequel je dois créer une séparation entre le contenu principal et le pied de page qui devrait ressembler à ça :

http://img89.xooimage.com/files/b/2/7/separation_03-39b75c1.png

Comme vous l'aurez compris, l'idée est que le motif se trouve au centre et que la ligne s'étende sur toute la largeur de la page.

J'ai donc créé ajouté un border-top au footer pour créer cette ligne. Pour le motif j'ai utilisé un background-image.


footer{
    border-top: 1px solid #7B7B7B;
    background-image: url('../images/interface/ornement-footer.png');
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 50px;
}


Le problème est que je n'arrive pas à superposer le background-image et le border, ce qui paraît logique vu que le border se trouve sur le bord... Ce qui me donne ça :

http://img86.xooimage.com/files/2/5/e/result-39b763c.png

Ma question est donc la suivante : y'a-t-il une astuce pour superposer le background et le border ?

Sinon je peux utiliser une image contenant la ligne+le motif, mais si je peux le faire via le code c'est toujours mieux Smiley ravi

Merci d'avance pour votre aide !
Modifié par ClementParis (22 Nov 2012 - 16:23)
Tu peux faire cela :

footer{
	border-top: 1px solid #7B7B7B;
	background-repeat: no-repeat;
	background-position: center top;
	margin-top: 50px;
	height: 50px;
	width: 900px;
}
footer::before {
	content: "";
	background-image: url(../ornement-footer.png);
	height: 50px;
	width: 900px;
	margin-top: 20px;
	position: absolute;
	top: 18px;
	right: 20px;
	background-repeat: no-repeat;
}


J'ai défini une largeur et hauteur de footer arbitraire.
POur ton image tu peux enlever le trait et ne laisser que les dessins.
Tu règles la position de ton image avec top et right.
Bon courage Smiley smile
Il y a plus simple : indiquer un background-position avec une valeur négative..

background-position: center -20px;


ou -20px est à peaufiner évidemment. Si le footer n'a pas de overflow:hidden; , ça devrait très bien marcher.
Alors, j'ai testé tout ça :

Pour la solution de Ten avec la position négative : sa ne fonctionne pas, le background-image est coupé lorsqu'il dépasse du footer. J'ai essayé de jouer avec les valeurs de la propriété overflow mais sa ne change rien.

rodolpheb : en effet, j'ai réussi à le positionner après 2-3 calculs. Mais le problème du position absolute c'est qu'au zoom le motif se déplace sur le border du footer...

gc-nomade : c'est intéressant comme solution, mais sa ne fonctionne pas sous IE8 et je dois faire en sorte que tout fonctionne sous IE8...

Je vous remercie bien pour vos réponses, mais si vous avez une idée complémentaire pour les améliorer ou une autre solution, je suis preneur Smiley smile

Merci encore

PS : J'ai vérifié, sa fonctionne bien en utilisant une image contenant la bordure + l'élément graphique. Mais le code c'est toujours mieux ^^
Modifié par ClementParis (20 Nov 2012 - 20:39)
Je n'ai pas d'effet de zoom, ni sur FF et ni sur Chrome!!
Envoie moi ton code avec le parent de ton footer.
Modifié par rodolpheb (21 Nov 2012 - 00:15)
Je suis pas sûr que tu ais compris ce que j'ai dit (si je me trompe, pardon) : ce que je veux dire c'est que lorsqu'on effectue un zoom (ctrl+molette ou ctrl++), l'image étant positionné en absolu reste toujours à la même distance des bords de la fenêtre, d'où le décalage.
J'ai repris la proposition de rodolpheb : sa fonctionne effectivement, j'ai du passer à côte de quelque chose la première fois.

Et en effet, sa fonctionne également des backgrounds multiples.

Merci pour votre aide !
Modifié par ClementParis (22 Nov 2012 - 16:20)
Sujet clos
Aller à