Partager vos
astuces Déco
Posez votre question Signaler

Decaler background

Kasoa - Dernière réponse le 10 nov. 2011 à 12:12
Bonjour à tous,
Voilà j'aurais aimé savoir sil 'est possible de décaler un " background: url(image);" par rapport à un emplacement précis (haut, bas, droite gauche) et si oui comment faire ?
En gros pour un exemple précis j'aimerais que mon background ne commence qu'à 800px du haut de ma page et se repète à l'infini vers le bas..
D'avance merci,
Lire la suite 

Decaler background »

18 réponses
Réponse
+0
moins plus
Revan26914 1792Messages postés 14 octobre 2007Date d'inscription 8 décembre 2011Dernière intervention 13 sept. 2008 à 23:24
Bonsoir,

Oui c'est tout à fait possible ;-)

Voilà les propriétés CSS à ajouter: 

background-position: 0px 800px;
background-repeat: y-repeat;


Pour le background-position, le décalage est effectué par rapport au coin haut gauche. Les 0px déterminent le décalage de l'image de fond sur la droite et les 800px le décalage en bas.




Cordialement

Revan

Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
Kasoa 14 sept. 2008 à 00:38
Merci pour cette réponse mais en fait je ne dois pas procéder de la bonne manière pour atteindre le résultat que j'attend.

Donc j'ai une 2ème question.

Est-il possible de mettre 2 background (images) sur la balise body, de choisir lequel sera au premier plan et d'en décaler 1 de "x"px ? :D

Oulala c'est compliqué tout ça :(

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Revan26914 1792Messages postés 14 octobre 2007Date d'inscription 8 décembre 2011Dernière intervention 14 sept. 2008 à 02:15
Non ce n'est pas possible d'en mettre deux sur la même balise. Seule la deuxième image apparaîtra.

Ce que tu peux faire c'est mettre une image sur la balise body et une sur la balise html ce qui donnerai dans ton CSS: 

body{
background-image: url("nom_de_l'image");
}

html{
background-image: url("nom_de_l'image");
background-position: 0px 800px;
background-repeat: y-repeat;
}




 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
Kasoa 4Messages postés 14 septembre 2008Date d'inscription 14 sept. 2008 à 15:42
J'ai donc essayé avec les balises html et body avec 2 fond différent, cela ne marche pas. J'ai essayé avec plusieurs tailles pour le decalage (d'ou le 300px actuel) mais je ne vois aucun changement :(

Mon site : http://r14545.ovh.net/~weinyth/site/

J'essaie de caler l'image suivant entre le footer et le bloc des news : http://r14545.ovh.net/...

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Revan26914 1792Messages postés 14 octobre 2007Date d'inscription 8 décembre 2011Dernière intervention 14 sept. 2008 à 18:37
Si j'ai bien compris, tu veux mettre une image de fond en dessous du contenu de la page?

Si c'est le cas, pourquoi tu utilises alors une image de fond sur l'ensemble de la page? met simplement une image en dessous du contenu de ta page ;-)


Tu as accès au code html de la page?



Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
Kasoa 4Messages postés 14 septembre 2008Date d'inscription 14 sept. 2008 à 19:21
Oui j'ai accès à tout, par contre je ne comprend pas trop ce que tu veux dire :s

 Ajouter un commentaire
Revan26914 - 14 sept. 2008 à 20:25
Au lieu d'appliquer le background-image sur la balise body ou html, applique le sur contenu de ta page ;-)


Exemple: 

#content{
background-image: url("ton_image");
background-position: ... ;
background-repeat: ... ;

etc.
}



Ajouter un commentaire
Réponse
+0
moins plus
PhP 1757Messages postés 11 décembre 2000Date d'inscription 14 sept. 2008 à 20:04
Bsr

Avant d'esayer de modifier d'avantage ton site règle d'abord tes pb de mise en page sur IE

Sous FF tout est OK mais sous IE 6 tout est décalé :

http://www.nobodysperfect.freesurf.fr/kasoa.jpg

Ajouter un commentaire
Revan26914 - 14 sept. 2008 à 20:25
Bonne idée ^^


Ajouter un commentaire
Réponse
+0
moins plus
Kasoa 4Messages postés 14 septembre 2008Date d'inscription 15 sept. 2008 à 00:04
Oula, c'est pas décalé comme ça chez moi :s

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Kasoa 4Messages postés 14 septembre 2008Date d'inscription 15 sept. 2008 à 02:11
Aaah mais c'est avec IE "6", je viens de m'en apercevoir. bah t'as qu'à mettre ton explorer à jour !!! :D

Je vais me faire relayer par un pote pour le site, je ne vais pas m'en sortir sinon :(

Merci de votre aide :D

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
PhP 1757Messages postés 11 décembre 2000Date d'inscription 15 sept. 2008 à 08:59
Bjr

bah t'as qu'à mettre ton explorer à jour !!! :D


Ouais c'est une façon de voir les choses T'Oh !
Personnellement je déteste les sites qui me forcent la main : mettez ceci ou cela à jour ... en général je zappe LOL

Ceci dit : http://www.w3schools.com/browsers/browsers_stats.asp



Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
Revan26914 1792Messages postés 14 octobre 2007Date d'inscription 8 décembre 2011Dernière intervention 15 sept. 2008 à 18:17
Personnellement, je suis d'avis que c'est au webmaster de rendre accessible son site et pas aux internautes de s'adapter ^^



Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
Fricky42 487Messages postés 15 septembre 2008Date d'inscription 9 mars 2011Dernière intervention 15 sept. 2008 à 18:20
Euuuuh...
Tu veux en gros 2 images en background... Et si de ces 2 images tu n'en fait qu'une ? (Meme avec paint tu pourrais le faire =p).

Bon j'ai surement mal saisi le probleme =D

 Ajouter un commentaire - Site web
Revan26914 - 15 sept. 2008 à 18:26
Le problème c'est que si le contenu de la page augmente, elle recouvrira le background au lieu de se positionner par rapport au contenu ;-)

Ajouter un commentaire
Réponse
+0
moins plus
Florent 10 nov. 2011 à 11:51
bon, tu peut mettre plusieurs image en background contrairement a ce que dise la plupart. Voici le code CSS:

background: url(../images/fond1.png) repeat-y center,
url(../images/fond0.png),
#000000;

La première ligne est l'image du dessus, la deuxième ligne est l'image qui viens dessous, et ainsi de suite.

Mon problème, comme le tien, c'est que j'aimerai trouvé une solution pour décalé la première image par rapport au haut.

 Ajouter un commentaire
babane5 - 10 nov. 2011 à 11:54
Il suffit de jouer avec les divs =>
<div class="permierFond">
<div class="deuxiemeFond">
<div class="contenu">
</div>
</div>
</div>

PS: Je crois que le fait de mettre deux fonds c'est du CSS3, donc pas compatible avec tous les navigateurs !
Florent - 10 nov. 2011 à 12:12
comme ceci:

background: url(../images/fond0.png) repeat-x,
url(../images/fond1.png) repeat-y center,
url(../images/fond0.png),
#000000;
Ajouter un commentaire
Posez votre question
Ce document intitulé « Decaler background » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook