Problème image background dans balise DIV
yannours
-
jjsteing Messages postés 1670 Date d'inscription Statut Contributeur Dernière intervention -
jjsteing Messages postés 1670 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
débutant dans le css j'ai un problème qui m'énerve depuis 2 jours (c'est le problème en se lançant là dedans sans bases théoriques solides t en tatonant) : j'ai un site web dans lequel j'ai placé des div. Celles-ci se placent correctement mais dans l'une d'elle je veux mettre une image en fond avec du texte par dessus mais impossible. J'ai tout essayé et rien n'a marché. Je vous donne un extrait du css :
body {
margin: 0;
font-family: verdana;
color: #000000;
font-size: 10px;
background-color: #97BE0D;
background-repeat: no-repeat;
background-position: center center;
}
p{ margin:0px;padding:0px;}
.conteneur {
width:600px;
height:435px;
margin-left:auto;
margin-right:auto;
}
#contenu {
width: 600px;
height: 435px;
margin-right: auto;
margin-left: auto;
}
#texteleft {
width: 350px;
}
#texteright {
width: 250px;
height: 435px;
float: right;
background: url(/images/general/fond-index.gif) no-repeat left bottom ;
}
et l'html avec la partie qui m'intéresse (l'Id texteright) :
<div class="conteneur">
<div id="contenu">
<div id="texteright"><p> </p><p> </p>
<p><font size="2" color="#E1007A"><strong>LOGO / IDENTITÉ VISUELLE</strong></font> </p>
<ul><font size="2">
<li>Logotype</li>
<li>Identité visuelle</li>
<li>Charte graphique</li>
<li>Nom de marque, slogan</li>
<li>Etc.</li></font></li></ul>
<p><font size="2" color="#E1007A"><strong>PRINT / EDITION</strong></font></p>
<ul><font size="2" >
<li> Flyers</li>
<li> Dépliants</li>
<li> Brochures</li>
<li> Affiches</li>
<li> Etc.</li></font></ul></div>
<div id="texteleft"><p></font></p><p> </p><p><br />
<font size="2" color="#D4081C"><strong>Patchwork, c'est la création caméléonesque</strong></font><br><br>
<font size="2" color="#673A15"><strong>Patchwork, un regard à 360°</strong></font><br>
BlablablablablablablaBlablablabla<br>
blablablaBlablablablablablablaBla<br>
blablablablablablaBlablablablabla<br><br>
<font size="2" color="#673A15"><strong>Patchwork, se fond dans vos projets</strong></font><br>
BlablablablablablablaBlablablablablabla<br>
blaBlablablablablablablaBlablablablabla <br><br>
<font size="2" color="#673A15"><strong>Patchwork, votre studio de compagnie</strong></font><br>
BlablablablablablablaBlablablablabla<br>
blablaBlablablablablablablaBlablablabla<br>
blablablaBlablablablablablablaBlablablal<br><br>
<font size="2" color="#673A15"><strong>Patchwork, une créativité sans limites</strong></font><br>
BlablablablablablablaBlablablablablabla</strong></font></p></font></font></div>
</div>
<!--fin conteneur -->
</div>
En espérant voir mon soucis réglé, merci d'avance !!!
Yann
débutant dans le css j'ai un problème qui m'énerve depuis 2 jours (c'est le problème en se lançant là dedans sans bases théoriques solides t en tatonant) : j'ai un site web dans lequel j'ai placé des div. Celles-ci se placent correctement mais dans l'une d'elle je veux mettre une image en fond avec du texte par dessus mais impossible. J'ai tout essayé et rien n'a marché. Je vous donne un extrait du css :
body {
margin: 0;
font-family: verdana;
color: #000000;
font-size: 10px;
background-color: #97BE0D;
background-repeat: no-repeat;
background-position: center center;
}
p{ margin:0px;padding:0px;}
.conteneur {
width:600px;
height:435px;
margin-left:auto;
margin-right:auto;
}
#contenu {
width: 600px;
height: 435px;
margin-right: auto;
margin-left: auto;
}
#texteleft {
width: 350px;
}
#texteright {
width: 250px;
height: 435px;
float: right;
background: url(/images/general/fond-index.gif) no-repeat left bottom ;
}
et l'html avec la partie qui m'intéresse (l'Id texteright) :
<div class="conteneur">
<div id="contenu">
<div id="texteright"><p> </p><p> </p>
<p><font size="2" color="#E1007A"><strong>LOGO / IDENTITÉ VISUELLE</strong></font> </p>
<ul><font size="2">
<li>Logotype</li>
<li>Identité visuelle</li>
<li>Charte graphique</li>
<li>Nom de marque, slogan</li>
<li>Etc.</li></font></li></ul>
<p><font size="2" color="#E1007A"><strong>PRINT / EDITION</strong></font></p>
<ul><font size="2" >
<li> Flyers</li>
<li> Dépliants</li>
<li> Brochures</li>
<li> Affiches</li>
<li> Etc.</li></font></ul></div>
<div id="texteleft"><p></font></p><p> </p><p><br />
<font size="2" color="#D4081C"><strong>Patchwork, c'est la création caméléonesque</strong></font><br><br>
<font size="2" color="#673A15"><strong>Patchwork, un regard à 360°</strong></font><br>
BlablablablablablablaBlablablabla<br>
blablablaBlablablablablablablaBla<br>
blablablablablablaBlablablablabla<br><br>
<font size="2" color="#673A15"><strong>Patchwork, se fond dans vos projets</strong></font><br>
BlablablablablablablaBlablablablablabla<br>
blaBlablablablablablablaBlablablablabla <br><br>
<font size="2" color="#673A15"><strong>Patchwork, votre studio de compagnie</strong></font><br>
BlablablablablablablaBlablablablabla<br>
blablaBlablablablablablablaBlablablabla<br>
blablablaBlablablablablablablaBlablablal<br><br>
<font size="2" color="#673A15"><strong>Patchwork, une créativité sans limites</strong></font><br>
BlablablablablablablaBlablablablablabla</strong></font></p></font></font></div>
</div>
<!--fin conteneur -->
</div>
En espérant voir mon soucis réglé, merci d'avance !!!
Yann
A voir également:
- Problème image background dans balise DIV
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
5 réponses
Remplaces :
Par :
background: url(/images/general/fond-index.gif) no-repeat left bottom ;
Par :
background-image: url(/images/general/fond-index.gif) no-repeat left bottom ;
Bonjour :)
voici un ptit bout de code ;) (http://jjsteing.ifrance.com/Projets/Div_Image_texte.php)
<style type="text/css">
body {
color: purple;
background-color: #d8da3d
}
.entete{
position: Absolute;
border-style: solid ;
border-color: blue ;
top: 20px;
left: 30px;
width: 200px;
height: 100px;
background-image:url('Images/Div_Image_texte.jpg');
background-repeat:no-repeat;
}
</style>
<FORM></FORM>
<BODY><div class='entete' align='center' >blabla</div></body>
voici un ptit bout de code ;) (http://jjsteing.ifrance.com/Projets/Div_Image_texte.php)
<style type="text/css">
body {
color: purple;
background-color: #d8da3d
}
.entete{
position: Absolute;
border-style: solid ;
border-color: blue ;
top: 20px;
left: 30px;
width: 200px;
height: 100px;
background-image:url('Images/Div_Image_texte.jpg');
background-repeat:no-repeat;
}
</style>
<FORM></FORM>
<BODY><div class='entete' align='center' >blabla</div></body>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question