28172 sujets

CSS et mise en forme, CSS3

Background gradient avec image de fond [Résolu]

Bonjour,

J'aimerais ajouter une image de fond à une div de notification (style coloredbox), mais je ne sais pas comment la combiner à un fond gradient (voir en gras).

.success {
  margin: 0.5em 0 0.5em 0;
  padding: 0.8em 0.8em 0.8em 3.0em;
  border: solid 1px #b2dba1;
  border-radius: 10px;
  color: #468847;
  [b]background: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%) ;
  background: url('../images/notices/success.png') no-repeat 10px 50% ;[/b]
}


En image, ça donnerait donc un mélange entre ça :

http://i.imgur.com/bAMekCE.jpg
...et ça :
http://i.imgur.com/YDAywZB.jpg

Mes multiples tentatives à l'aveugle ne m'ont mené à rien ; vous l'aurez deviné, je suis noob en CSS Smiley langue
Mais je suis sur que vous avez la solution... ! Smiley cligne

Merci d'avance !
Modifié par verspax (28 Feb 2015 - 20:35)
Par exemple:

          .success {
                position:relative;
                margin: 0.5em 0 0.5em 0;
                padding: 0.8em 0.8em 0.8em 3.0em;
                border: solid 1px #b2dba1;
                border-radius: 10px;
                color: #468847;
                background: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%) ;
           }
           .button {
                position:absolute;
                height:24px;
                width:40px;
                left:-0.2em;
                background: url('success.png') no-repeat 10px 50%;
            }
           p {margin:0 10px;}



        <div class="success">
            <div class="button">       </div>
            <p>Un nouveau sujet spécial de centralisation</p>
            <p>Autre sujet toujours en attente de vos retours</p>
        </div>

mais on doit pouvoir faire mieux...
Je suis donc obligé d'utiliser 2 classe, 2 div ?
En effet, j'ai un cas particulier ou je ne peux utiliser qu'une seule classe (utilisation d'un plugin sous CMS).
En attendant, c'est déjà mieux que rien, je te remercie Smiley cligne
Dans l'attente d'une éventuelle autre solution...
Modifié par verspax (28 Feb 2015 - 18:47)
as tu essayer les fonds multiples ?
background: url('../images/notices/success.png') no-repeat 10px 50%,  linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%)  ;

en sachant que le premier est dessus , le second dessous et ainsi de suite. Pour declarer une couleur de fond en sus , c'est sur le dernier ou a coté avec background-color.
http://codepen.io/anon/pen/raKrga
C'est bien ça ! Ma classe :
.success {
  margin: 0.5em 0 0.5em 0;
  padding: 0.8em 0.8em 0.8em 3.0em;
  border: solid 1px #b2dba1;
  border-radius: 10px;
  color: #468847;
  background: url('../img/ok.png') no-repeat 10px 50%,  linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%)  ;
}

Et voilà :

http://i.imgur.com/gqzGSiX.jpg

Suffisait donc juste d'ajouter une virgule... Smiley sweatdrop C'était dur ! Smiley lol

Merci à vous ! Smiley cligne
...et moi ça me fait découvrir la syntaxe des fonds multiples, que je n'ai jamais utilisée...
Merci à tous deux pour l'info.
Sujet clos
Aller à