18007 sujets

Questions générales et questions de débutants

Comment mettre une image derrière des image html css?

Bonjour à tous,
je suis nouveau sur le site et alsacréations m'a beaucoup aidé pour la construction d'un site internet,
mais malheureusement je ne trouve aucun forum pour m'aider dans mon problème.
Voila je cherche à mettre un rectangle blanc derrière des images qui sont enfait des liens.
mon background est déjà de couleur "silver"
j'aurais voulu savoir comment "reculé" une image pour la mettre derrière mes images-liens sans changé la forme du background...
(je ne sais pas si j'ai bien expliqué )
merci pour la futur réponse
J'avoue que je n'est pas tout saisie non plus Smiley smile

Par contre tu pourrais faire une image avant -> après pour que l'on comprenne ce que tu souhaite.
Et même en bonus tu pourrais mettre ton code actuel sur codepen (ou alors tu as peut être un lien sur lequel on pourrait voir ton code) Smiley smile
Modifié par JENCAL (26 Sep 2016 - 14:30)
je veux enfait rajouté tout simplement une image derrière mes images liens qui est un simple carré blanc

voici mon code html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style2.css" />

<title>Nos poêles</title>

</head>
<header>
<ul id="nav">
<li><a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Acceuil%202/Acceuil%202.html">Accueil</a></li>
<li><a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Nos%20Po%C3%AAles/nouveau/po%C3%AAles2.html">Nos poêles</a></li>
<li><a href="#">Nos services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>

<body>

<article><center>
<img src="C:\Users\Utilisateur\Desktop\Site La Poele des Délices\Acceuil 2\source\entête.png" /></center>
</article>

<pays>
<p><center><a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Nos%20plats%20espagnols/indexes.html"><img style="float:center; margin-right:80px;" src="C:\Users\Utilisateur\Desktop\Site La Poele des Délices\Site la poêle des délices\source\drapeau pays\Espagne\ESP.png" alt=""/>
<a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Nos%20plats%20orientals/indexor.html"><img src="C:\Users\Utilisateur\Desktop\Site La Poele des Délices\Site la poêle des délices\source\drapeau pays\Maroc\MAR.png" alt="" /></center></p>
</pays>
&nbsp;
<pays>
<p><center><a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Nos%20plats%20Italiens/indexit.html"><img style="float:center; margin-right:80px;" src="C:\Users\Utilisateur\Desktop\Site La Poele des Délices\Site la poêle des délices\source\drapeau pays\Italie\IT.png" alt=""/><a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Nos%20plats%20fran%C3%A7ais/indexfr.html"><img src="C:\Users\Utilisateur\Desktop\Site La Poele des Délices\Site la poêle des délices\source\drapeau pays\France\FR.png" alt="" /></center></p>
</pays>
&nbsp;
<pays>
<p><center><a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Nos%20plats%20americains/indexus.html"><img style="float:center; margin-right:80px;" src="C:\Users\Utilisateur\Desktop\Site La Poele des Délices\Site la poêle des délices\source\drapeau pays\USA\US.png" alt=""/>
<a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Nos%20plats%20irlandais/indexir.html"><img src="C:\Users\Utilisateur\Desktop\Site La Poele des Délices\Site la poêle des délices\source\drapeau pays\Irlande\IR.png" alt="" /></center></p>
</pays>
<p><center><a href="file:///C:/Users/Utilisateur/Desktop/Site%20La%20Poele%20des%20D%C3%A9lices/Nos%20plats%20bresilien/indexbr.html">
<img src="C:\Users\Utilisateur\Desktop\Site La Poele des Délices\Site la poêle des délices\source\drapeau pays\Bresil\BR.png" alt="" /></a></center></p>

</body>
</html>

et mon css
#nav {
padding: 0; margin: 0;
text-align: center
; /* centrer le texte */
}
#nav li {
display: inline;
list-style: none;
}

#nav a {
display:inline-block;
margin: 0 -3px;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}

ul li a {
display:block;
width:194px;
line-height:50px; /*hauteur de l'image de fond*/
background:black url(images/noir-1.png) repeat-x;
color:silver;
text-decoration:none;
text-align:center;
font-family: Calibri;
font-size: 18px;
}
ul li a:hover {
background:black url(images/noir-2.png) repeat-x;
color:white;
}

h1 {
font-family: Calibri;
font-size: 25px;
font-weight: bold;
}

body{
width:100%;
background-color: white;
}

.rect {
background-size: cover;
}
Modifié par Johalex (26 Sep 2016 - 14:56)
Bonjour,
Si je comprend bien, tu souhaites simplement ajouter un fond blanc sous tes images. Si c'est bien celà, tu peux ajouter une <div> englobant les images concernées, à laquelle tu ajoutes un background en css.

Exemple :
<div class="white">
<img src="..." />
<img src="..." />
</div>

.white{ background: #ffffff; }
Bonjour,
En fait il te faut un mécanisme passe partout, tu peux en utiliser un deux trois...1.000 Smiley cligne
Peut importe ou tu le place dans un DIV une Table ou autre ..., le résultat sera indépendant !!
Regardes cet exemple, http://www.fox-infographie.com/forum/rond.htm
Et inspires toi du code pour le mettre à ta main !

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
<style>
body { background-color : #1d1d1d; font-family : 'Lato', sans-serif; color :#dddddd; 
font-size :24px; text-align :center; }
a.LesA {font-family: 'Lato', sans-serif;  font-size :24px !important;color :#F3702E; text-decoration :none;}
a.LesA:hover { color :#FFFFFF; }
.mes_ronds{background-position:center top;border:1px solid #dddddd;border-radius:50%;box-shadow:inset 3px 3px 4px 0 rgba(0,0,0,0.4);cursor:pointer;display:inline-block;margin-bottom:6px;height:200px;width:200px; color: grey}
.mes_ronds:hover{box-shadow:inset 0 0 0 200px rgba(0,0,0,0.3);color: white;}
</style>
</head>
<body>
<div class="mes_ronds"  onClick="window.location.href='enseignement.php';" style="background-image:url('anne001250.jpg');background-repeat: no-repeat;background-size: 100% 100%;
    background-origin: content-box"><p class="Center">
<A class="LesA" href="enseignement.php" ><br /><br />CONNAITRE</a></p>
</div>
</body></html>

Tiens nous au courant ...
Sujet clos
Aller à