28220 sujets

CSS et mise en forme, CSS3

Url(background) positionnement : image tronquée

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 :


  .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 :

http://www.web-images.org/images/920/exemple.jpg

Et j'aimerai :

http://www.web-images.org/images/921/exemplebon.jpg

Vala Smiley smile !

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

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 Smiley langue )

Avec un code du style:


.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 Smiley confused
Voilà j'y suis arrivé en faisant une balise "externe" à ma div "block" qui s'appelle img.block ... en la mettant en position absolue, j'arrive à ce que toute ma page soit fluide et que le logo suive la largeur ou l'aggrandissement des polices mais garde sa hauteur par rapport au cadre.

Si ça vous intéresse ...

voilà mon code :


  .block {
    PADDING-TOP: 3em;
    BORDER-COLOR: #FDFDFD;
    BORDER-STYLE: solid;
    BORDER-WIDTH: thin;
    WIDTH: 75%;
    POSITION: relative;
    
    }

img.block {
	position: absolute;
	left:3em;
	top:-20px;
	z-index: 2;
    }
Sujet clos
Aller à