28172 sujets

CSS et mise en forme, CSS3

Utilisation de background imbriqué (css3)

Bonjour, je découvre le le langage web. Et pour commencer, je travaille sur html5 et css3.

Je voudrais utiliser 2 images de fonds superposer, avec un effet de transparence sur l'image supérieure. Mais voila, ca ne marche pas, cette dernière reste invisible ....
J'ai scindé mon code en 2 : un fichier html et un fichier cas. Voici le gros du code.



Index.css


h1
{
opacity: 0.5;
background-image: url(Images/fond1.jpg);
}
Body
{
background-image: url(Images/fond2.jpg);
}


Index.htm

<body>
<h1>
Hello world
</h1>
</body>


Pouvez vous m'aidez svp ?
salut,

si tu veux que ton h1 est une image de fond avec transparence, il faudrait que tu utilises le format .png.
J'ai donc converti mes images en ont, mais le résultat reste le même, seul le background du body apparait.
re,

normalement en enregistrant le background de l'élément h1 en .png avec un pourcentage de transparence et le background du body en .jpg tu devrais arriver au résultat souhaité.
Ok, ca marche ... presque .... (Même avec du JPG, l'opacity fonctionne ceci dit)

Avec ce code, voici ce que j'obtiens :

upload/42865-test2.JPG


Alors qu'en fait, c'est plutot ca que je voudrais :

upload/42865-test1.JPG


Comment faire ?

Mon problème de background invisible venait du fait que je créais une "layer" intermédiaire dans le body qui contenait le 2nd background (Fond1.jpg), dans lequel on avait l'appel <h1> qui lui n'était pas défini :


Index.css

Body
{
  background-image: url(Images/fond2.jpg);
}

BG_2
{
  background-image: url(Images/fond1.jpg);
}




Index.htm

<body>
  <BG_2>
    <h1>
         Hello world
    </h1>
  </BG_2>
</body>


Dans ce cas là, le BG_2 n'est pas affiché
Modifié par xNiux (20 Jan 2012 - 12:15)
L'image de fond s'affiche autant que possible (en fond...) de ton élément. Si tu ne lui laisses pas la place (ici, la hauteur ne semble pas suffisante), l'image sera tronquée.

Pour augmenter la hauteur, tu peux rajouter du contenu dans ton élément ou bien lui forcer une taille (minimum ou pas) à l'aide de :

element {
    min-height : valeur; /* Taille variable en fonction du contenu de ton élément mais qui fait au minimum la taille indiquée */
    height : valeur; /* Taille fixe */
}
Sujet clos
Aller à