CSS + url(background-img)

Discussion dans 'Web, design' créé par [Ben], 11 Avril 2005.

Statut de la discussion:
Fermée.
  1. Offline
    [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)
    [Ben], 11 Avril 2005
    #1
  2. Offline
    MbK_ Etudjant
    MbK_, 11 Avril 2005
    #2
  3. Offline
    [Ben] Elite
    [IMG]

    Et j'aimerai :

    [IMG]

    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:
    [Ben], 12 Avril 2005
    #3
  4. Offline
    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)
    Xou, 12 Avril 2005
    #4
  5. Offline
    [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)
    [Ben], 12 Avril 2005
    #5
  6. Offline
    [Ben] Elite
    C'est bon j'ai trouvé tout seul, j'ai fait autrement mais ça marche même mieux, merci pour tout (...)
    [Ben], 12 Avril 2005
    #6
  7. Offline
    MbK_ Etudjant
    tu peux po expliquer histoire que si qlq1 est dans le meme cas?
    MbK_, 12 Avril 2005
    #7
  8. Offline
    [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é :) !
    [Ben], 13 Avril 2005
    #8
Statut de la discussion:
Fermée.