[css] gestion des images

**qmulonainbus** · 07/09/2006, 16h08

bonjour à tous
je suis en train de me mettre au CSS et j'avoue que ce n'est pas facile malgré les super tuto (thx

)
j'ai une question existancielle, on peut insérer une image dans feuille de style?
par exemple dans un bloc div, puis appeler une image?
help

**Hug0_76** · 07/09/2006, 16h14

Salut,

Avec une feuille de style et une image tu peux :

Mettre une image en fond
Positionner ton image
Repeter ou pas ton image
Rendre opaque ton image

Mais en aucun cas tu peux simuler un <img src="src" alt="Image">.

Ca répond à ta question?

**qmulonainbus** · 07/09/2006, 16h23

en partie oui merci

bon alors disons que j'ai une image
dont je veux définir la position sans la répéter bien sur
quel serait le code à faire? oui je suis débutant dsl

sachant que par la suite il n'y aura pa que une image sur la page mais plusieurs qui devront chacune avoir leur position définie dans la feuille de style

c'est gérable?

**Hug0_76** · 07/09/2006, 16h50

euh...

ben en fait par exemple tu définis un truc du genre

.img1 {
position:absolute;
top: 10px;
left: 10px;
}

.img2 {
position:absolute;
top: 50px;
left: 50px;
}

dans ton code html :

<img src="img1.gif" class="img1" alt="Image 1">
<img src="img2.gif" class="img2" alt="Image 2">

Quand je parlais de positionner une image moi c'était par exemple :

.carre {
position:absolute;
top: 20px;
left: 20px;
background-image: url(../images/img1.gif);
background-repeat: no-repeat;
background-position: 5px 5px;
}

Mais tu ne peux mettre qu'une seule en fond d'écran.
Tu comprends ce que je veux dire?

**MasterOfChakhaL** · 07/09/2006, 16h54

par image de fond, il faut comprendre une image de fond pour un element

C'est à dire, que pour un element (div a ou table par exemple) tu peux définir une image de fond et la positionnée par rapport à cet élément.

Cela étant dit, voilà comment placer l'image a.gif, en fond de l'élément dont l'id est "cetElement" à 10 pixel de la gauche, et coller en haut:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#cetElement {
  background-image: url(./a.gif);
  background-repeat: no-repeat;
  background-position: top 10px;
}

avec l'url que je donne, cela signifie que l'image est dans le même répertoire que la feuille de style...
Attention à ce détail qui a son importance

**qmulonainbus** · 07/09/2006, 17h31

super cool je pense avoir saisi là
bon j'essaye et je vous dis si c'est exactement ça que je voulais

et merci

*qq temps après*

bon alor j'ai essayé les images seules bon ça marche, mais je vois pa l'intérêt du css à ce moment là
j'ai essayer chacune de vos méthodes, et celle que je veux, c.a.d. un element div contenant un background, ne fonctionne pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Document sans nom</title>
</head>
<body>	
<div id="cetElement" >1212</div>
</body>
</html>

voilà pour le html et suit le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#cetElement {
  background-image: url(./a.gif);
  background-repeat: no-repeat;
  background-position: top 20px;
}

j'ai quasiment rien changé par rapport aux codes que vous m'avez donné, et rien ne s'affiche sous firefox

(j'ai mis un 1212 pour vérifier que le div était bien là)
pourriez-vous éclairer ma lanterne, merci d'avance
ah oui et mon image a.gif est bien dans le meme dossier que .css et .html ^^

please °-°

**qmulonainbus** · 08/09/2006, 10h40

s'il vous plait j'ai besoin d'aide, je suis surement passé à côté d'un truc sans y faire attention

**ilood** · 08/09/2006, 18h47

Salut

Si ton image est dans le même dossier que la feuille de styles il n'y a pas à ajouter ./
On a alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#cetElement {
  background-image: url(a.gif);
  background-repeat: no-repeat;
  background-position: top 20px;
}

**qmulonainbus** · 08/09/2006, 19h14

merci pour l'aide
mais après changement ça ne fonctionne toujours pas :/

cela pourrait_il venir du code html?

**MasterOfChakhaL** · 08/09/2006, 19h20

Le code tel que tu nous le donnes un peu plus haut fonctionne chez moi (avec le ./ dans l'url)
Il doit y avoir autre chose... Es-tu sûr de l'url que tu indiques dans le css?

**qmulonainbus** · 09/09/2006, 00h04

oui normalement :
j'ai un dossier contenant
le index.html
le styles.css
le a.gif (au passage : 98*87*8bpp)
et c'est tout

éléments externes : firefox+avast+zone alarm (en théorie ça change rien mais bon si ça peut vous éclairer

)

**qmulonainbus** · 09/09/2006, 18h17

j'ai pas trouvé ce qui clochait pour ce code, j'en ai refait un autre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
div#miniA1 {
/*miniature A1 */
  background-image: url(carre.gif);
  position:absolute;
  background-repeat: no-repeat;
  top:8px;
  left:46px;
  width: 38px;
  height: 38px;
  padding: 0;