Descendre Le Header

[carcy 6]

Bonjour à tous

 

L'en tête de mon site comporte une image bêtement appelée header.jpg, que j'ai introduit dans la fonction modeles/peel7/css/screen.css :

 

@media screen {
	html, body {
	height: 100%;
	background-color: transparent;
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	background-position:center top;
	}

c'est pas mal !!

MAIS j'aimerai maintenant et temporairement, afficher en haut de page grâce à la zone html personnalisée, une publicité de la forme d'un bandeau bleu dans lequel serait inscrit

"10% de remise sur tout le site grâce au code promotionnel ANNIVJLTV".

Une fois activé, ce bandeau fonctionne ç la perfection et s'affiche tout en haut de page, dans le header .

TOUTE la page descend donc (menus, espace de connection, choix des langues, de la devise etc.

SAUF mon image !!!! et du coup, le bandeau s'affiche sur l'image et les pavés de sélection descendent également sur l'image comme on peut le voir sur le screen suivant :

 

 

 

existe t'il un moyen simple de faire en sorte que mon header.jpg descende également avec tout le reste lorsque ce bandeau est affiché ? (dans le css peut être ?)

 

merci pour vos tuyaux !!

 

Jean-Luc

 

[Simon développeur PEEL 0]

Bonjour,

 

Vous pouvez modifier la position de l'image en modifiant l'attribut background-position:center top;.

[carcy 6]

Bonjour Simon !

merci pour votre réponse !

Mais je n'arrive à rien...

En fait dans le CSS, j'avais également rajouté sous /* Header */

 

#main_header {
/*déplace tout le bloc de page sous le logo du haut*/
	position: relative;
	background-repeat: no-repeat;
	margin: 0 auto 0 auto;
	height: 280px;
	display: block;
}

Mon image veut pas descendre sous ce satané bandeau bleu...

[Simon développeur PEEL 0]

Bonjour,

 

l'attribut background-position doit être utilisé dans la classe qui utilise l'image de fond.

[carcy 6]

Bonjour Simon

 

merci pour votre réponse !!

effectivement, le problème vient de là :rolleyes: :P

 

en fait j'avais pas mis

background-image: url(../images/header.jpg);

 

dans la bonne classe !!!

je l'avais mis dans

@media screen au lien de le mettre dans la classe

#main header !

 

donc maintenant ça marche !!!

merci beaucoup !

bonne journée

 

Jean-Luc