Html/css double backgroud

Fermé
Signaler
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
-
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
-
Bonjour,
savez vous comment faire un background en top et un en bottom comme sur ce site???
http://www.top-figurine.com/contact.php
merci

cordialement, rake-off.

26 réponses

Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
468
Tu peux le faire avec des div et tu gère ça en CSS.
Exemple tu met un div en début de page avec une largeur à 100% et un background et tu met le deuxième sur body en le mettant en bas.
Si tu gère ça bien tu aura le résultat voulu.
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
ce n'est pas possible donc d'appliquer une image en haut et une autre en bas en tan que background??
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
j'ai un petit problème, je voulais laisser mon body en width:1024px; mais mon image de fond en bas est de 1366px et elle ce redimensionne à mon body
0
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
tu as plein de solutions, la plus simple serait de mettre ton header dans le background en CSS et repeat X,
de devellopper ton "body" en 1024 dans un div puis en bas (footer) mettre un div en 1366 ensuite tu peux voir à jouer sur le zindex si tu veux que le body passe sur le footer.
je te fais un code qui te donne le résultat que tu recherche, c'est vite fait, mais ça doit marcher :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.bg {
background-image: url(../res/bg.jpg);
background-repeat: repeat-x;
background-color: #666666;
margin: 0;
}
.bottom {
margin: 0;
padding: 0;
bottom: 1px;
text-align: center;
position:absolute;
left:50%;
margin-left: -683px;
z-index: 0;
}
-->
</style>
</head>

<body class="bg">
<div style="width:1024px; margin-left:auto; margin-right:auto; margin-top:75px; text-align:center;z-index: 100;">
<img src="../image/body.jpg" width="1024" height="430" /> 
</div>
<span class="bottom">
<img src="../image/footer.jpg" width="1366" height="120" />
</span>

</body>
</html>

dans la class "bottom" margin-left = -la moitié de ton footer
les CSS sont à deporter vers une feuille de style
is it OK
un de mes site est fait ainsi :
http://www.retoucheur-photo.com/
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
ok je test dés maintenant mais dit moi c'est du flash la plupart des corps de ton site??
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
c'est quoi z-index, désolé mais je ne m'en suis jamais servis et les span quand est ce qu'il faut les utiliser??
0
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
Ajax Flash et Css…

pour revenir a la class bottom, si tu veux que le footer passe dessous, met z-index à -(moins)100
tu peux voir aussi mon autre site, Ajax et jQuery Css Flash :
http://michel-mee.com/
A+
0
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
z-index c'est la position du "calque" ou div dans la 3eme dimension, c'est à dire en profondeur.
pour les span :
http://www.webmaster-hub.com/lofiversion/index.php/t3085.html
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
merci beaucoup, cela marche mais j'ai toujours un soucis mon span ce trouve sous le corps (3eme dimension) mais juste en dessous de mon background et non en bas de ma page comme je le voudrais, un div ne serai pas plus favorable??
0
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
tu peux, c'est fonction de tes besoins…
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
oui mais du coup j'ai toujours mon problème mon span ne s'affiche pas en bas de la page??
0
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
fait un copier coller du code, j'ai fais une ou deux modif et remplace le span par div
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
je suis désolé mais la il ne s'affiche pas en bas de la page web mais au bas de la fenêtre donc il ce place par rapport à la taille de la fenêtre et n'est ppas au bonne endroit, une idée??

merci
0
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
suprime : bottom: 1px; si tu veux que tout soit collé et suprime aussi le z-index (à voir)
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
le probleme c ke mon background fai 1000px de haut et le pied de page y est coller au lieu d'être tt en bas
0
Si ce site t'inspire tellement, tu peux en afficher la source ...
Par contre, ... désolé de spoiler, mais il semblerait que leur double background CSS n'est qu'un simple PNG sur toute la page ;)
0
Messages postés
134
Date d'inscription
mercredi 17 décembre 2008
Statut
Membre
Dernière intervention
10 janvier 2015
4
ma question repose egalement sur les feuille de style CSS du forum-actif !

j'aimerais savoir, comment integrer un curseur personalisé sur son forum, j'ai vu plein de topic sur ce sujet, non seulement un topic sur les faq forum-actif, mais je ne comprend pas leur description :


body {
cursor: url('ADRESSE DU CURSEUR.cur'), auto;
}



que dois-je mettre a " ADRESSE DU CURSEUR.cur ??? je ne c'est pas comment heberger un curseur, si c'est ce qu'il faut faire !

et secondo, faut-til enlever les deux petit " ' " avant et apres l'adresse ?

merci pour vos reponses
0
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
468
Merci de te créer ton propre topic plus que de poser ta question sur celui d'un autre.
A chaque question son topic.
0
Messages postés
134
Date d'inscription
mercredi 17 décembre 2008
Statut
Membre
Dernière intervention
10 janvier 2015
4
je veux pas etre de mauvaise fois, mais ... j'ai crée mon topic, avant de poser ma question ici mais .... sans reponse depuis hier !
0
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
mon problème de double background, c'est que si ce n'est qu'un png sur toute la page comment cela ce fait que le fichier png prendrai la taille de la page traité sans jamais ce déformé, juste le centre en blanc s'allongerai?? mais comment?
0
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
tu peux aussi faire comme suit :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.bg {
background-image: url(http://michel-mee.com/
background-repeat: repeat-x;
background-color: #CCCCCC;
margin: 0;
}
.container {
margin-top:120px;
height: 600px;
}
.txt {
font-family: Arial, Helvetica, sans-serif;
color: #993333;
font-size: 24px;
}
.titr {
font-family: Arial, Helvetica, sans-serif;
color: #660099;
font-size: 32px;
}
-->
</style>
</head>

<body class="bg">
<table class="container" width="1366" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="171"> </td>
<td width="1024"><p align="center" class="titr">09/03/08<br /></p>
<div align="justify"><span class="txt">Des images tournées avec un téléphone portable montrent le char en train de percuter un coin de la maison. Le conducteur, apparemment saoûl et hilare, tente maladroitement de se hisser à bord avec deux bouteilles de vodka.<br />
"Sortez-le du char", hurle alors une villageoise.<br />
L'armée a promis vendredi de verser des dédommagements aux propriétaires de la maison et a dit que le char devait avoir connu une panne et avoir été distancé par une colonne de blindés qui se dirigeait vers un site de manoeuvres.<br />
Auparavant, l'armée avait expliqué que le blindé avait glissé sur de la neige fondue.<br />
"Bien sûr, il y a eu des abus mais l'équipage a agi de toute bonne foi pour rattraper son unité", a déclaré le colonel Konstantin Lazoutkine, porte-parole du District militaire Volga-Oural.<br />
"Dieu merci, ils n'ont pas tiré", dit quant à lui le propriétaire de la maison sur la vidéo.</span>
</p>

<p><span class="txt">BERLIN (AFP) - Quelque 230 DVD pornographiques ont été retrouvés à l'abbaye Maria Laach, l'une des plus célèbres d'Allemagne, dissimulés dans la chambre d'un moine bénédictin, affirme le quotidien bavarois Abendzeitung de jeudi.<br />
La police a fait cette découverte après le vol de 4 DVD de pornographie homosexuelle par un moine dans un sex-shop de Wurtzbourg, en Bavière.<br />
Le moine de 49 ans avait été pris en flagrant délit par la vendeuse. Il s'était alors échappé du magasin, avait jeté dans une poubelle municipale son larcin avant d'être rattrapé par la police, selon le journal.<br />
Comme le sex-shop se plaignait de vols à répétition, des policiers se sont rendus dans l'abbaye du moine, en Rhénanie-Palatinat, et y ont découvert la collection de films dans sa cellule. </span></p></div></td>
<td width="171"> </td>
</tr>
</table>
<table width="1366" border="0" cellspacing="0" cellpadding="0" align="center" background="http://michel-mee.com/">
<tr>
<td align="center" height="100">FOOTER</td>
</tr>
</table>
</body>
</html>


qu'en pense tu ?
0