[REGLE] Placer image derrière background ?

Bonjour,

J'aimerais placer une image derrière le background de ma page, mais de facon à quelle dépasse sur le coté, à un endroit précis que je peux définir avec margin ou padding je suppose. C'est un drapeau que j'aimerais qu'on voit.

Le code css est :

#page {
	width : 785px;
    border-top:1px solid #cccccc; 
    border-bottom:1px solid #cccccc; 
    background:#fff url(img/bg_page.png) repeat-y left top; 
    margin : auto;
	text-align : left;
	padding: 0px 45px;
    }

Comment on peut faire ca ?

Exemple : http://www.allocine.fr/ (passez la pub) Comme on peut voir l'acteur (David Duchovny, X-Files) en haut à gauche derrière.
Mon site est disposé de la meme facon, un cadre au milieu, qui est le background.
Modifié par thibotus01 (05 Aug 2008 - 17:51)

Bonjour

C'est tout simplement un background défini pour body ou HTML. Pour la position de l'image tu peux la définir en pourcentages.

Sur allociné ? Oui mais c'est tout un poster qu'ils affichent moi c'est une petite image.

et ? Je ne vois pas où est le problème ?

Après tu peux utiliser un div en position absolue mis en dessous du cadre grâce aux z-index. Mais si ta div page est centrée, en cas d'agrandissement ou de rétrécissement du navigateur l'image ne suivra pas.
Modifié par Yasashii (26 Jul 2008 - 12:01)

Oui a la base je voyais ca comme ca avec un div et z-index, mais j'ai fais comme t'as dit, et c'est parfait

background:#f5f5f5 url(img/drap.jpg) no-repeat;
background-position: 81% 0.02%;

Ah ouais mais quand j'agrandi la page, le fond se déplace librement. Donc sur un écran 24" par exemple ca fait moche.
Je suis sous un 22", donc si je réduit, sur un ecran plus petit, avec une réso. plus petite, bah moche aussi Le drapeau revient vers la gauche.

Il est pas possible de fixer ?
Modifié par thibotus01 (27 Jul 2008 - 12:58)

Bonjour,

#imagefond {
	position: absolute;
	z-index: 10;
	top: 100px;
	left: 50%;
	margin: -450px;
	height: ...;
	width: ...;
	background: ...;
}
#page {
	position: relative;
	z-index: 20;
	width: 760px; /* 785 ça ne passera jamais en 800x600,
	                 on aura une barre de défilement inutile
	                 pour afficher quelques pixels... */
	margin: 0 auto;
	background: ...;
}

À adapter, bien entendu.

En mettant 760px ca beug... Si je remet 785 ca s'affiche bien. Regarde sur l'url que j'ai mis plus haut.

Par contre, mon drapeau ne s'affiche plus en suivant ton code. je dois adapter les pourcentages ou normalement c'est bon ?
Modifié par thibotus01 (27 Jul 2008 - 12:19)

thibotus01 a écrit :
En mettant 760px ca beug... Si je remet 785 ca s'affiche bien. Regarde sur l'url que j'ai mis plus haut.

C'est normal, c'est ton design qui est prévu pour un contenu de 785px de large. Tu as par exemple une image d'en-tête qui a cette largeur. De plus, ton conteneur a du 45px de padding de chaque côté, ce qui nous fait une largeur totale de 875px pour div#page.
Dans ces conditions, ça ne sert pas à grand chose de changer la largeur, effectivement, vu que ça n'est pas prévu pour passer en 800x600 (même si ça restera lisible dans cette résolution, il faudra juste jouer de la barre de défilement horizontal).

thibotus01 a écrit :
Par contre, mon drapeau ne s'affiche plus en suivant ton code. je dois adapter les pourcentages ou normalement c'est bon ?

Tu dois comprendre le fonctionnement de ce code et en adapter toutes les valeurs (et, en passant, dans le code que je propose, il n'y a pas de pourcentages...). Ce n'est qu'un exemple, pas une solution toute faite à ton problème (la politique d'Alsacréations est d'accompagner les membres dans leur apprentissage, pas de leur fournir du code à copier-coller ).

Pour le design, oui c'est une adaptation de dotclear vers wordpress, et puis je n'ai pas fais ce thème. Faudrait que je vois avec le créateur même
Perso. les réso 800x600 tendent à disparaitre, et je suis POUR le "forcing" au changement d'équipement, et pas rester avec des moniteurs de l'age des pierre, et ainsi embêter les développeurs . Donc là je vais pas m'embeter pour ce soucis, mais merci de l'info, je n'y avais pensé.

Je voulais savoir si tu avais mis des valeurs px au hasard ou non
J'ai mis a zero les valeurs, je vois le drapeau maintenant, je vais y'allé à taton. Merci

Edit : Erf, y'a des pourcentages pour le left, ce qui fait bouger le drapeau encore en agrandissant ou réduisant le navigateur
Modifié par thibotus01 (27 Jul 2008 - 13:04)

thibotus01 a écrit :
Edit : Erf, y'a des pourcentages pour le left, ce qui fait bouger le drapeau encore en agrandissant ou réduisant le navigateur

Ah oui, autant pour moi. Il ne faut pas toucher au left: 50%, mais modifier les autres valeurs. Si ton élément doit apparaitre à droite plutôt qu'à gauche, il faudra utiliser une valeur positive pour margin-left, par exemple 250px.

Merci c'est bon je pense, niquel

thibotus01 a écrit :
Merci c'est bon je pense, niquel

Tu considères donc que ce sujet est [Résolu] ?

Erf, ce n'est pas résolu Je viens de m'apercevoir que ca beug sacrément avec IE 7 (6 je n'ai pas testé).
Le drapeau est caché, et les onglets sont décalés.

Firefox et Safari ok....
Modifié par thibotus01 (04 Aug 2008 - 19:16)

Tu aurais une page en ligne ?

url supprimé. (confidentialité)
Modifié par thibotus01 (05 Aug 2008 - 17:51)

Il me semble que le principal problème provient d'un phénomène de fusion des marges (pas sûr sûr) entre ton div #topnav et l'élément UL qu'il contient. Pour le décalage à gauche il est causé par le premier LI vide... qu'il suffit de supprimer (je l'ai passé en display: none; le temps de tester).

Quoi qu'il en soit je ne comprends pas bien pourquoi tu n'as pas mis un id #topnav directement à ton UL (puisque le DIV est inutile) et du coup il suffisait de lui affecter un width: 785px; et un margin: 40px auto 0; ce qui je pense devrait régler le problème (même si personnellement j'aurais utilisé un DIV #global dans lequel j'aurais placé cet UL et le DIV #page...)

#topnav ul , et #topnav ul li ont déjà des propriétés :

#topnav ul { background:none; margin:0; padding:0; display:block; width:600px; }

#topnav ul li { border:0; display:inline; float:left; margin:0; padding:0 20px 0 0; text-align:center; 

Comment veux tu que je modifie ? Faut pas que je perde ces valeurs...

Il y avait le div #topnav, et les propriétés ul et li attachés à topnav. Ou je suis perdu...
Modifié par thibotus01 (05 Aug 2008 - 08:46)

Pour être plus clair :

tu remplaces :

<div id="topnav">
  <ul>
    <li style="display:none;" class="current_page_item"></li>
    <li class="page_item page-item-232"><a href="#" title="Archives">Archives</a></li>
    <li class="page_item page-item-268"><a href="#" title="Contact">Contact</a></li>
  </ul>
</div>

par

<ul id="topnav">
  <li class="page_item page-item-232"><a href="#" title="Archives">Archives</a></li>
  <li class="page_item page-item-268"><a href="#" title="Contact">Contact</a></li>
</ul>

et au niveau css il faut d'abord renommer #topnav ul li {} en #topnav li {} et #topnav devient :

#topnav { 
	margin: 0 auto; 
	padding: 45px 0 0 0; 
	width:826px; 
	height: 38px;
	text-align: left;
}

les valeurs sont peut-être à affiner...
Modifié par Heyoan (05 Aug 2008 - 19:39)

Ah niquel, rien à paufiner
Merci, je met REGLE