Image PNG et background-color?
Fermé
timo_1t
Messages postés
159
Date d'inscription
mercredi 29 décembre 2010
Statut
Membre
Dernière intervention
26 février 2015
-
4 mars 2011 à 17:59
timo_1t Messages postés 159 Date d'inscription mercredi 29 décembre 2010 Statut Membre Dernière intervention 26 février 2015 - 5 mars 2011 à 12:54
timo_1t Messages postés 159 Date d'inscription mercredi 29 décembre 2010 Statut Membre Dernière intervention 26 février 2015 - 5 mars 2011 à 12:54
A voir également:
- Image PNG et background-color?
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Webp to png - Guide
2 réponses
salut
Généralement, une img en png sera plus "lourde" quand jpg. Tu peux mettre ton img en jpg progressif avec une compression de 60%.
Tu dois mettre ta commande de background-image a l'int. du <div> du bloc et non pas dans le <body>.
Tu adaptes la taille de ton img. avec les commandes : width="100" et height="100" (100 en px).
Généralement, une img en png sera plus "lourde" quand jpg. Tu peux mettre ton img en jpg progressif avec une compression de 60%.
Tu dois mettre ta commande de background-image a l'int. du <div> du bloc et non pas dans le <body>.
Tu adaptes la taille de ton img. avec les commandes : width="100" et height="100" (100 en px).
timo_1t
Messages postés
159
Date d'inscription
mercredi 29 décembre 2010
Statut
Membre
Dernière intervention
26 février 2015
8
5 mars 2011 à 12:53
5 mars 2011 à 12:53
Bonjour.
Voila rapidement le fameux menu :
HTML
<body>
[...]
<div id="menu">
<img src="css/fond_menu.png" class="fond_menu" />
<div class="text_menu">
<h3>Mon projet</h3>
<ul>
<li> <a href="css/FichesVIE.pdf">turlute</a></li>
<li> <a href="css/FichesVIE.pdf">tatatatata</a></li>
<li> <a href="mailto:lulu.lola@gmail.com?subject=infos V.I.E">Me contacter</a></li>
</ul>
<h3>Actuellement</h3>
<ul>
<li><strong>En poste :</strong> bois de boulogne.</li>
<li><strong>Recherche active de passe.</strong></li>
</ul>
</div>
</div>
[...]
CSS
[...]
.fond_menu
{
background-image: no-repeat;
float: left;
}
.text_menu
{
text-align: justify;
position: absolute;
bottom: 20px;
left: 45px;
float: left;
}
#menu
{
width: 22%;
float: left;
}
[...]
cependant je me retrouve avec deux blocks en un non superposés :
-le premier est une image de fond que j'ai réalisé.
-le deuxième est le texte de mon menu.
l'objectif c'est que cette image devienne le fond de ce menu. Je sait que le positionnement absolute est de la bidouille. Mais comment faire ?
Voila rapidement le fameux menu :
HTML
<body>
[...]
<div id="menu">
<img src="css/fond_menu.png" class="fond_menu" />
<div class="text_menu">
<h3>Mon projet</h3>
<ul>
<li> <a href="css/FichesVIE.pdf">turlute</a></li>
<li> <a href="css/FichesVIE.pdf">tatatatata</a></li>
<li> <a href="mailto:lulu.lola@gmail.com?subject=infos V.I.E">Me contacter</a></li>
</ul>
<h3>Actuellement</h3>
<ul>
<li><strong>En poste :</strong> bois de boulogne.</li>
<li><strong>Recherche active de passe.</strong></li>
</ul>
</div>
</div>
[...]
CSS
[...]
.fond_menu
{
background-image: no-repeat;
float: left;
}
.text_menu
{
text-align: justify;
position: absolute;
bottom: 20px;
left: 45px;
float: left;
}
#menu
{
width: 22%;
float: left;
}
[...]
cependant je me retrouve avec deux blocks en un non superposés :
-le premier est une image de fond que j'ai réalisé.
-le deuxième est le texte de mon menu.
l'objectif c'est que cette image devienne le fond de ce menu. Je sait que le positionnement absolute est de la bidouille. Mais comment faire ?
5 mars 2011 à 12:54