Image PNG et background-color?
timo_1t
Messages postés
173
Statut
Membre
-
timo_1t Messages postés 173 Statut Membre -
timo_1t Messages postés 173 Statut Membre -
Bonjour,
Je souhaiterais mettre une image à la place d'un background-color dans un bloc menu se situant sur la gauche de ma page.
Est ce possible en jouant avec les marges ? Dois-je m'arranger pour convertir cette balise en type ligne?
ou
Dois-je superposer deux blocs (texte+image) avec float? j'ai l'impression que c'est de la "bidouille"...
Merci de vos conseils
Je souhaiterais mettre une image à la place d'un background-color dans un bloc menu se situant sur la gauche de ma page.
Est ce possible en jouant avec les marges ? Dois-je m'arranger pour convertir cette balise en type ligne?
ou
Dois-je superposer deux blocs (texte+image) avec float? j'ai l'impression que c'est de la "bidouille"...
Merci de vos conseils
A voir également:
- Image PNG et background-color?
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
- Image de manchots sur une image de plage. - Forum Graphisme
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).
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 ?
