2 fonds sur ma page html

supersissi -  
 Utilisateur anonyme -
Bonjour,

Je cherche à mettre 2 fonds sur ma page html et je n'y arrive pas...
Je veux mettre un fond dégradé, et par dessus, un logo en png qui se répète...

Voici mon CSS : 

       body{
            background:linear-gradient(#989FA5,white);
            background-repeat: no-repeat;
            font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
            height: 100%;
        }

        #fond {
            background-image:  url(links/logos.png);
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #table1 {
            margin-top: 170px;
        }
        #table2 {
            margin-top: 30px;
        }


Et voici mon HTML 

<body>
<div id="fond">

    <table id="table1" align="center">
   <tr>
       <td>
           <video controls src=""quot;xxxxxxxxx.mp4" width="350px"></video>
           <br/><center><b>Prise en main : </b>Les premiers pas...</center>
       </td>
       <td>
           <video controls src=""quot;xxxxxxxxx.mp4" width="350px"></video>
           <br/><center><b>Prise en main : </b>Vidéo 2</center>

       </td>
       <td>
           <video controls src=""quot;xxxxxxxxx.mp4" width="350px"></video>
           <br/><center><b>Prise en main : </b>Vidéo 3</center>

       </td>
   </tr>
</table>




    <table id="table2" align="center">

   <tr>
       <td>
           <video controls src=""quot;xxxxxxxxx.mp4" width="350px"></video>
           <br/><center><b>Fonctionnalités avancées : </b>Vidéo 1</center>
       </td>
       <td>
           <video controls src=""quot;xxxxxxxxx.mp4" width="350px"></video>
           <br/><center><b>Fonctionnalités avancées : </b>Vidéo 2</center>
       </td>
       <td>
           <video controls src=""quot;xxxxxxxxx.mp4" width="350px"></video>
           <br/><center><b>Fonctionnalités avancées : </b>Vidéo 3</center>
       </td>
   </tr>
</table>

</div>    
</body>


Mon problème c'est que mon fond (mon logo) prend la hauteur de mon contenu (mes talbes) ... c'est à dire qu'il commence à 170px du top et s'arrête juste après mes tables.

Quelqu'un peut m'aider ça me rend folle ???
merci beaucoup
A voir également:

2 réponses

Réponse 1 / 2
Exileur Messages postés 1475 Date d'inscription   Statut Membre Dernière intervention   150
 
Salut,

Dans ton CSS :
background-repeat: no-repeat;

et dans fond, background-image: url(links/logos.png);

Body est parents de fond, donc la propriété no-repeat va t etre utilisé.

Cordialement


0
Utilisateur anonyme
 
Bonsoir,

Non, le no-repeat de body n'est pas transmis par héritage à #fond. La valeur par défaut de background-repeat est repeat, pas inherit.
0
Réponse 2 / 2
Utilisateur anonyme
 
Bonjour

Je ne vois pas où est ton problème. Ce que tu décris semble tout à fait normal par rapport au code que tu as écrit. Pourrais-tu préciser ce à quoi tu t'attendais ?
Au hasard : si tu voulais que le logo commence dès le top et pas après 170px, il fallait utiliser padding-top et non pas margin-top dans #table1. En effet, le background s'applique au padding mais pas aux margins.
0

Discussions similaires

"Couleur de page" pour une seule page
lisa -
Lisa -

6 réponses