28172 sujets

CSS et mise en forme, CSS3

Barre de "notification" suivant le scrolling de la page

Hello à tous Smiley biggrin voilà j'ai un problème, je voudrais mettre en background une image mais je n'y arrive pas. Sur mon <div id="****> mon texte</div> Seul le texte se fait "colorer" par l'image... je voudrais une image entière qui prenne toute la largeur de la page, où l'on peut écrire dessus, qui est en haut de le page, et qui suit le mouvement de la scrollbarre. Merci de vos réponses Smiley smile
Modifié par Twee (28 May 2011 - 10:09)
Bonjour,
Qu'as-tu déjà comme code?
Quelle taille a ton image? (alsacréations ne diffuse pas ton image!)
Modifié par lddsoft (28 May 2011 - 10:01)
en fait l'image est dans un lien.

mon css:
#notification
{ 
   background-image: url('/images/notification.png');
   position: fixed;
   background-size: 100% 100%;
   background-repeat: repeat-y;
}


et mon html:
<div id="notification">TEST</div>
Ton image mesure 1500px de largeur sur 45px de hauteur. Il s'agit donc d'un bandeau ou d'une barre (comme pour un menu).
Tu voudrais que cette barre occupe toute la largeur de ton div #notification qui est en position "fixed" en haut de l'écran.
Si c'est ça, je retire ce que j'ai dit avant. Ton image doit se trouver dans #notification qui doit avoir un width: 1500px;
Si l'image ne se répète pas verticalement, c'est que ton div #notification ne contient qu'une seule ligne et que sa hauteur est insuffisante pour voir le repeat-y.

Mais je ne suis pas certain de bien capter tes intentions.
Est-ce quelque chose comme ceci?
<!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=iso-8859-1" />
    <title>notification</title>
    <style type="text/css">
/*<![CDATA[*/
body {margin:0; padding:0}
#notification {
	position: fixed;
	width: 100%;
	background-image: url('/images/notification.png');
	background-repeat: repeat;
	color: white;
}
    /*]]>*/
    </style>
  </head>
  <body>
<div id="notification">TEST<br />
<br /><br /><br />
<br /><br /><br />
</div>

<div>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />gggggggggggggggggggggggg
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />mmmmmmmmmmmmmmmmmmmmmmmm
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />vvvvvvvvvvvvvvvvvvvvvvvv
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />ooooooooooooooooooooooo
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />uuuuuuuuuuuuuuuuuuuuuuu
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />yyyyyyyyyyyyyyyyyyyyyyy
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />xxxxxxxxxxxxxxxxxxxxxxx
</div>
  </body>
</html>
Mais encore ...?
Sois plus précis dans la description de ton projet!
Sinon il n'est pas possible de t'aider Smiley ohwell
#notification

{

background-image: url('/images/notification.png');

background-attachment: fixed;

background-size: 100% 100%;

background-repeat: repeat-y;

}

Et oui il ne faut pas mettre une position fixed pour ce que tu veux faire mais un background-attachment fixed. A moins que je n'ai pas compris ce que tu veux ^^
@devyl

Je crains que ce ne soit pas le réultat escompté Smiley rolleyes

@Twee
Ce serait plutôt ceci, non?
<!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=iso-8859-1" />
<title>notification</title>
<style type="text/css">
/*<![CDATA[*/
body {margin:0; padding:0}
#notification {
position: fixed;
width: 100%;
height: 45px;
background-image: url('images/notification.png');
color: white;
}
/*]]>*/
</style>
</head>
<body>
<div id="notification">TEST</div>
<div>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />gggggggggggggggggggggggg
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />mmmmmmmmmmmmmmmmmmmmmmmm
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />vvvvvvvvvvvvvvvvvvvvvvvv
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />ooooooooooooooooooooooo
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />uuuuuuuuuuuuuuuuuuuuuuu
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />yyyyyyyyyyyyyyyyyyyyyyy
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br />xxxxxxxxxxxxxxxxxxxxxxx
</div>
</body>
</html>

Modifié par lddsoft (29 May 2011 - 06:58)
Sujet clos
Aller à