28220 sujets

CSS et mise en forme, CSS3

Problème d'affichage avec background-image

Bonjour à tous !
Je débute avec le CSS mais je bute sur un problème !

Je suis entrain de faire un site avec un tutorial, et pour mettre une image de fond dans un bloc, j'ai mis ce code dans la feuille CSS :
.head1 {
background-image:url('head1.gif');
width:770px;
height:91px;
}

et ce code dans la page HTML :
<div class="head1"></div>

J'ai testé sous IE 6 et Mozilla, mais l'image ne s'affiche pas, pourtant elle est placée dans le même fichier que la page web et la feuille de style, j'ai essayé avec guillemets, sans guillemets... Rien ne change, l'image ne s'affiche pas, j'ai cherché sur le net, mais le code a l'air correct, je ne comprends pas... Si quelqu'un peut m'aider !!!

Merci !
Salut,
Est-ce que tu as essayé de mettre ton image dans le code HTML au lieu de le mettre en image de fond dans ta fueille CSS ?

Cela te donnerait ça :
code dans la feuille CSS :
.head1 {
width:770px;
height:91px;
}


et ce code dans la page HTML :
<div class="head1"><img src="head1.gif" alt="lhead1.gif" /></div>


C'est du système D, mai ça devrait fonctionner sans problème...
Smiley cligne
merci, ça marche bien comme ça, mais le problème, c'est que j'ai une image de fond dans un bloc, et une image (qui à un fond transparent) à mettre par dessus ce fond.
Donc j'avais pensé mettre background-image dans le CSS pour l'image de fond, et mettre l'image avec SRC dans le HTML pour l'image à mettre par dessus.
Mais si à ce moment là je mets les 2 images dans le code HTML, et bien ça ne marche pas, puisque qu'on ne peut pas mettre les 2 images dans le même bloc, elles se mettent côte à côte et ne se superposent pas !
Bonjour,
A tu bien vérifié que ton chemin d'acces à l'image est bon ??? (c'est souvent tout betement ça les problèmes avec les background ...)
Utilise un chemin relatif (genre background-image:url(/images/head1.gif);)

PS: n'utilise pas les guillemets, j'ai constaté qu'avec les guillemets ça ne marche pas soue IE mac ...
Modifié par fxoxo (20 Oct 2005 - 16:04)
J'ai essayé d'enlever les guillements, ça ne change rien... Et pour le chemin de l'image, il n'y a pas de soucis, c'est bien ça... Je ne comprends vraiment pas !!!
Peut-être l'extension qui est "GIF" et non pas "gif" ? Si tu es sous Windows, tu devrais aller dans les options des dossiers, et afficher les extensions dont le type est connu (dans "Outils", "Options des dossiers", sous l'onglet "Affichage").

Il est fort probable que le problème vienne de là (bien qu'à ce moment, je ne comprend pas pourquoi cela fonctionne avec un <img />, mais ça c'est plutôt un mystère du navigateur en question).
ça ne change absolument rien ! Moi qui étais à priori pour l'utilisation des CSS pour remplacer les tableaux, je commence à me dire que ce n'est peut-être pas une si bonne idée, surtout si le CSS n'est pas pris en charge pas tous les navigateurs !
Pourtant, j'utilise IE6 et ça devrait marcher, mais les images ne s'affichent pas ! merci pour votre aide en tous cas !
Bonjour,

J'ai le même probleme, ex : http://emploi-formation.poitou-charentes.org/carif/ARES_test/hometest.htm

avec ou sans guillement, sur IE et firefox.
Le résultat lui est bon dans dreamweaver en mode création.

Merci d'avance

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>

<style type="text/css">
<!--
#principal {
background-image: url(bandeau.jpg);
height: 400px;
width: 679px;
background-repeat: no-repeat;
}

-->
</style>
</head>

<body>
<div id="Principal">

</div>
</body>
</html>
</html>
Modifié par landry (27 Oct 2005 - 16:22)
Administrateur
Hello landry et bienvenue.

Attention à deux choses très importantes :
1- ne jamais poster (polluer) de nouveaux sujets dans un sujet déjà existant : ça rend les choses et la recherche compliquées, voire impossibles pour toi et pour les autres. Merci d'ouvrir un nouveau sujet.
2- merci d'afficher les codes correctement sur le forum, comme le demandent les Règles que tu as lues.
Sujet clos
Aller à