Ombre autour de mon image de fond, effet surélevé

[thaom melcrudak]

Bonjour ! J'utilise un JS afin d'avoir plusieurs bannières qui s'adaptent aux différentes résolutions. J'aimerais savoir s'il est possible d'ajouter une ombre, un effet surélevé autour de mes images de fond ? Aussi arrondir les coins ?  Ou dois-je utiliser un logiciel comme Gimp sur chacune de mes images avant de les installer?

Mercii

Fondatrice / phpbb2 / css et templates modifiés / opera et/ou chrome / www.ildir.purforum.com

Voici mon JS

Code:

$(function(){

var bg= "http://nsa34.casimages.com/img/2014/03/30//140330030526541685.png";

if(screen.width < 801) bg="http://nsa34.casimages.com/img/2014/03/30//140330014138270712.png";
else if(screen.width < 1025) bg="http://nsa33.casimages.com/img/2014/03/30//140330014235677424.png";
else if(screen.width < 1281) bg="http://nsa34.casimages.com/img/2014/03/30//140330014346439584.png";
else if(screen.width < 1367) bg="http://nsa34.casimages.com/img/2014/04/20/140420074100776598.png";
else if(screen.width < 1601) bg="http://nsa33.casimages.com/img/2014/03/30//140330014718178498.png";

document.body.style.backgroundImage="url(\""+bg+"\")";

});

[stefou]

Bonjour,
Sauf erreur de ma part, le code que vous donnez ne concerne pas les bannières mais les images de fond de votre forum...

[thaom melcrudak]

Oh en effet, je me suis mal exprimée !

[Self]

Bonjour,

Collez ce code dans votre feuille de style :
(Panneau d'administration > Affichage > Images et couleurs > Couleurs >Feuille de style CSS)

Code:

#min-width:hover{
    box-shadow:0px 0px 10px 5px #fff inset;
    border-radius:20px;
}

Vous verrez l'arrondi des bords seulement sur l'ombre en bas, la toolbar passe par dessus l'ombre du haut .

[thaom melcrudak]

J'aimerais que l'ombre et l'arrondi ne prenne effet que sur le bas, svp :DAussi est-ce possible de ne cibler que l'image en haut et pas tout l'index? Et pourquoi seulement en hover, peut-on le laisser en place en tout temps? Merci beaucoupp !

Si j'en demande trop, pardon à l'avance, je ne connais pas l'étendue des possibilités ^^

[Self]

Bonjour,

Non ce n'est pas possible.
Votre bannière étant en image de fond on ne peut pas appliquer l'ombre (ni les bords arrondis d'ailleur) à la hauteur de celle, seulement à la h'auteur du body.
Ce que vous pouvez faire c'est créer une autre image avec l'ombre et les bords arrondis et appliquer le CSS suivant :

Code:

body:hover{
    background-image: url('URL DE L IMAGE');
}

En remplaçant "URL DE L IMAGE" par l'adresse de la nouvelle image.

[thaom melcrudak]

Merci bien, sujet résolu !