CSS + url(background-img)

Statut
N'est pas ouverte pour d'autres réponses.

[Ben]

Elite
Je n'arrive pas à avoir mon image "complète". En fait, j'ai fait en sorte que le texte que je tappe dans le "block" soit entouré d'un fin cadre gris et j'aimerai mettre une image en "surimpression" en haut à gauche du cadre ... "j'y arrive" seulement avec mon code, on ne voit que la moitié de l'image ...

Voilà mon code :

Code:
  .block {
    PADDING-TOP: 30px;
    BORDER-COLOR: gray;
    BORDER-STYLE: solid;
    BORDER-WIDTH: thin;
    WIDTH: 750px;
    POSITION: relative;
    BACKGROUND-IMAGE: url(motiv_fichiers/motivat.png);
    BACKGROUND-REPEAT:no-repeat;
    BACKGROUND-POSITION: 30px -20px;
    
  }
Et ça donne ça :
Code:
____________________
|    \____b/                |
Au lieu de ça :

Code:
    _____
__/a      \____________
|  \___b/                    |
(vous me pardonnerez, je ne sais pas uploader d'images au boulot sur un ftp et imageshack j'ai pas envie :p)

Il faut rajouter quoi dans ma CSS ? Faire un DIV qui englobe "tout" ? Je pense pas que ça changera quelque chose :-(

Il faudrait pouvoir dire au "background" qui contient l'image, que JUSTEMENT il se tappe en "surimpression" au-dessus de tout ...
Un z-index ? Cheppa trop comment ça marche ni si ça marche avec le background ONLY (et oui, c'est lié à mon block de texte :p)
 
1er
OP
[Ben]

[Ben]

Elite


Et j'aimerai :



Vala :) !

Avec un code du style :

Code:
.image_1{
	position: relative;
	left:30px;
	top:-52px;
	z-index: 2;
}
... j'y arrive, MAIS ça n'est pas ce que je veux, je voudrai vraiment l'intégrer au "block" que je n'aie pas à faire une balise image et à me prendre la tête pour chaque block à aller rechercher l'image, que ça fasse partie intégrante de celui-ci :wink:
 

Xou

I ♥ rien
Tu fais les tests sous quel navigateur ?

Je sais que l'image de fond, avec firefox, se place suivant le padding également

Même avec le background-position il me semble (faudrait que je test)
 
1er
OP
[Ben]

[Ben]

Elite
J'ai testé les deux navigateurs principaux :p ...
Mais pour moi, si ça passe avec FireFox, c'est nickel, je m'en fous d'IE, je ferai un "hack" spécial IE le temps qu'il passe à la version 7 et supporte ENFIN les standards un minimum (on peut rêver)
 
1er
OP
[Ben]

[Ben]

Elite
C'est bon j'ai trouvé tout seul, j'ai fait autrement mais ça marche même mieux, merci pour tout (...)
 

MbK_

Etudjant
[Ben a dit:
]C'est bon j'ai trouvé tout seul, j'ai fait autrement mais ça marche même mieux, merci pour tout (...)
tu peux po expliquer histoire que si qlq1 est dans le meme cas?
 
1er
OP
[Ben]

[Ben]

Elite
Code:
.blocks
{
	padding-top: 3em;
	border-color: #9D9D9D;
	border-style: solid;
	border-width: thin;
	width: 100%;
	position: relative;
	margin-top: 2em;
}


/* non-relative values -> top: -20px, To be Mac-Tested :p */
img.block
{
	position: absolute;
	left: 3em;
	top: -20px;
	z-index: 2;
}
Je fais :
Code:
<div class="block">
    <img src="img" alt="img" title="img" class="block">
Blabla text que je veux
</div>
Et ça donne un cadre autour de mon texte, avec une image (de 40px de haut) centrée horizontalement sur le haut du cadre, comme dans l'exemple ci-dessus en image (si le site stocke toujours mon image ...)

J'ai tout codé en "em" pour que les tailles soient relatives à la taille des caractères du navigateur, la seule taille en pixels est celle de l'alignement par rapport au cadre qui DOIT être fixe quelque soit la taille de caractère ou le navigateur/support utilisé :) !
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut