Metre une image en css
Fermé
zola
-
5 oct. 2008 à 21:39
hani_ Messages postés 333 Date d'inscription lundi 22 septembre 2008 Statut Membre Dernière intervention 18 novembre 2009 - 7 oct. 2008 à 17:07
hani_ Messages postés 333 Date d'inscription lundi 22 septembre 2008 Statut Membre Dernière intervention 18 novembre 2009 - 7 oct. 2008 à 17:07
A voir également:
- Metre une image en css
- Metre virtuel - Guide
- Image iso - Guide
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
12 réponses
Bonjour,
Le chemin vers ton image est à faire à partir de ton fichier .css.
Je doute que ton répertoire image se trouve avec ton fichier css.
Là avec le chemin que tu as mis, ton architecture serait :
style.css
images
Et dans images :
fond_png
En espérant que ça va t'aider.
Le chemin vers ton image est à faire à partir de ton fichier .css.
Je doute que ton répertoire image se trouve avec ton fichier css.
Là avec le chemin que tu as mis, ton architecture serait :
style.css
images
Et dans images :
fond_png
En espérant que ça va t'aider.
Dessoler mai sa m'aide pas trot mon dossier et fait de cette manière ( j'ai fait un dossier ''Mon premier cite Internet'' ou il y a a l'intérieure mon fichier html et un sous dossier ''styles'' ou il y a a l'intérieure mon fichier css et un sous dossier images ou son stoker mai images ) j'aispere que sa poura vous aider pour le lien que je doi faire ?
fichier_css
body ses pour l'image de font et #en_tete ses pour la bannière ( si je me trompe pas )
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("../images/fond_png");
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
background-image: url("../images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
fichier_html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="fichier_css" href="../styles/fichier_css" />
</head>
Et j'ai mi mai dossier comme tu me la conseiller mai sa ne fonctionne toujours pas donc je te montre comment son fait mais fichier css et html tu pourra peut être me dire ses quoi la faute que j'ai du faire
body ses pour l'image de font et #en_tete ses pour la bannière ( si je me trompe pas )
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("../images/fond_png");
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
background-image: url("../images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
fichier_html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="fichier_css" href="../styles/fichier_css" />
</head>
Et j'ai mi mai dossier comme tu me la conseiller mai sa ne fonctionne toujours pas donc je te montre comment son fait mais fichier css et html tu pourra peut être me dire ses quoi la faute que j'ai du faire
Dessoler je ni arrive toujours pas, sa serré possible que tu me donne ton msn je t'envoi le dossier et que tu me le face ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
hani_
Messages postés
333
Date d'inscription
lundi 22 septembre 2008
Statut
Membre
Dernière intervention
18 novembre 2009
20
6 oct. 2008 à 11:34
6 oct. 2008 à 11:34
voila quelques exemples de mise en place d'image sur un site depuis la feuille CSS :
background:url(/images/logo.jpg) no-repeat;
image simple
background:url(/images/fond.jpg) no-repeat center center;
image simple centrée
background:url(/images/fond.jpg) repeat-x;
image simple qui se repete a l'infini (au maximum de la taille du body sinon de la taille de l'element html dans lequel il se trouve) (c'est un peux le fond d'écran "mosaique" windows).
background:url(/images/fond.jpg) no-repeat #ccc;
image simple avec un fond de couleur (ici gris)
il y a enormement de possibilité avec le css en voici quelque une...
je te laisse explorer la suite par toi même, tu verra que css est un outil TRES puissant...
background:url(/images/logo.jpg) no-repeat;
image simple
background:url(/images/fond.jpg) no-repeat center center;
image simple centrée
background:url(/images/fond.jpg) repeat-x;
image simple qui se repete a l'infini (au maximum de la taille du body sinon de la taille de l'element html dans lequel il se trouve) (c'est un peux le fond d'écran "mosaique" windows).
background:url(/images/fond.jpg) no-repeat #ccc;
image simple avec un fond de couleur (ici gris)
il y a enormement de possibilité avec le css en voici quelque une...
je te laisse explorer la suite par toi même, tu verra que css est un outil TRES puissant...
hani_
Messages postés
333
Date d'inscription
lundi 22 septembre 2008
Statut
Membre
Dernière intervention
18 novembre 2009
20
6 oct. 2008 à 13:59
6 oct. 2008 à 13:59
arborescence de ton site :
mon_premier_site_internet
|__styles
| |__fichier.css
|
|__images
| |__fichier.png
|
|__fichier.html
Il serais mieux de faire ainsi
mon_premier_site_internet
|__styles
| |__fichier.css (feuilles de style de ton site)
|
|__images
| |__fichier.png (images de ton site)
|
|__site
| |__fichier.html (differentes pas de ton site)
|
|__include
| |__fichier.html (entete et le bas de page de ton site)
|
|__fichier_index.html (index de ton site)
ENSUITE
pour répondre a ta question c'est un problème de chemin d'accès que tu as.
donc : pour allez dans un dossier il faut que tu sache ou tu te trouve.
ensuite : il suffit de lui dire ou allez depuis là ou tu te trouve.
ex : /images/fond.png
tu es ici a la racine et tu te déplace vers le dossier images et sélectionne une image
ex: ../images/fond.png
ici tu te trouve dans un sous dossier (include par exemple) tu remonte a la racine grâce a ../ puis tu redescend vers images et sélectionne un fichier.
dans ton cas tu vas devoir simplement faire
background:url(/images/fond_png.extension de l'image) no-repeat;
maintenant je te conseille d'utiliser l'arborescence que j'ai montré plus haut.
dans ce cas tu devras faire
background:url(../images/fond_png.extension de l'image) no-repeat;
mon_premier_site_internet
|__styles
| |__fichier.css
|
|__images
| |__fichier.png
|
|__fichier.html
Il serais mieux de faire ainsi
mon_premier_site_internet
|__styles
| |__fichier.css (feuilles de style de ton site)
|
|__images
| |__fichier.png (images de ton site)
|
|__site
| |__fichier.html (differentes pas de ton site)
|
|__include
| |__fichier.html (entete et le bas de page de ton site)
|
|__fichier_index.html (index de ton site)
ENSUITE
pour répondre a ta question c'est un problème de chemin d'accès que tu as.
donc : pour allez dans un dossier il faut que tu sache ou tu te trouve.
ensuite : il suffit de lui dire ou allez depuis là ou tu te trouve.
ex : /images/fond.png
tu es ici a la racine et tu te déplace vers le dossier images et sélectionne une image
ex: ../images/fond.png
ici tu te trouve dans un sous dossier (include par exemple) tu remonte a la racine grâce a ../ puis tu redescend vers images et sélectionne un fichier.
dans ton cas tu vas devoir simplement faire
background:url(/images/fond_png.extension de l'image) no-repeat;
maintenant je te conseille d'utiliser l'arborescence que j'ai montré plus haut.
dans ce cas tu devras faire
background:url(../images/fond_png.extension de l'image) no-repeat;
hani_
Messages postés
333
Date d'inscription
lundi 22 septembre 2008
Statut
Membre
Dernière intervention
18 novembre 2009
20
6 oct. 2008 à 17:03
6 oct. 2008 à 17:03
change ça :
background-image: url("../images/fond_png");
background-image: url("../images/banniere.png");
background-repeat: no-repeat;
par :
background: url(/images/fond_png) no-repeat;
background: url(/images/banniere.png) no-repeat center center;
donc: a chaque fois je n'ai jamais mis -image a la suite de background... ne le rajoutes pas ça sert a rien...
et supprimes les " " autour de l'url de ton image...
(en gros supprimes ce que j'ai collé en haut de mon message et colle ce que j'ai réecris...)
et ton image fond_png ?????? il lui manque pas une extension par hasard???? genre fond_png.PNG???
background-image: url("../images/fond_png");
background-image: url("../images/banniere.png");
background-repeat: no-repeat;
par :
background: url(/images/fond_png) no-repeat;
background: url(/images/banniere.png) no-repeat center center;
donc: a chaque fois je n'ai jamais mis -image a la suite de background... ne le rajoutes pas ça sert a rien...
et supprimes les " " autour de l'url de ton image...
(en gros supprimes ce que j'ai collé en haut de mon message et colle ce que j'ai réecris...)
et ton image fond_png ?????? il lui manque pas une extension par hasard???? genre fond_png.PNG???
hani_
Messages postés
333
Date d'inscription
lundi 22 septembre 2008
Statut
Membre
Dernière intervention
18 novembre 2009
20
6 oct. 2008 à 17:57
6 oct. 2008 à 17:57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="fichier_css" href="../styles/fichier_css" />
</head>
c'est la totalité de ton fichier html ça ?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="fichier_css" href="../styles/fichier_css" />
</head>
c'est la totalité de ton fichier html ça ?
zola-x304
Messages postés
35
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
7 avril 2009
6 oct. 2008 à 18:00
6 oct. 2008 à 18:00
Non ses juste le début si tu veut la totalité ses sa : ( ses juste un brouillon )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="fichier_css" href="../styles/fichier_css" />
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Les menus -->
<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>
<!-- Le corps -->
<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>
<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
<!-- Le pied de page -->
<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="fichier_css" href="../styles/fichier_css" />
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Les menus -->
<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>
<!-- Le corps -->
<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>
<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>
<!-- Le pied de page -->
<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
</div>
</body>
</html>
hani_
Messages postés
333
Date d'inscription
lundi 22 septembre 2008
Statut
Membre
Dernière intervention
18 novembre 2009
20
6 oct. 2008 à 18:12
6 oct. 2008 à 18:12
bla bla bla...
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Les menus -->
<div id="menu">
bla bla bla...
voici la partie qui nous intéresse...
a modifier par
<body>
<div id="page">
<div id="haut">
<div id=logo">
<h1 id="logo"><span>phrase pour referencement du site sur google (mots clef)</span></h1>
logo du site
</div
<div id="menu">
menu du site
</div>
</div>
<div id="contenu">
contenu du site
</div>
<div id="bas">
contenu pied de page
</div>
</body>
voici la structure du corp de la page css...
#logo{
width:386px;
margin:0 auto 0 auto;
padding:0;
}
#logo a{
display:block;
background:url(/images/logo.jpg) no-repeat;
height:81px;
margin:0 auto 0 auto;
}
#logo span{
display:none;
}
#logo img{
border:none;
}
pour le fond d'ecran je te laisse chercher un petit peu...
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Les menus -->
<div id="menu">
bla bla bla...
voici la partie qui nous intéresse...
a modifier par
<body>
<div id="page">
<div id="haut">
<div id=logo">
<h1 id="logo"><span>phrase pour referencement du site sur google (mots clef)</span></h1>
logo du site
</div
<div id="menu">
menu du site
</div>
</div>
<div id="contenu">
contenu du site
</div>
<div id="bas">
contenu pied de page
</div>
</body>
voici la structure du corp de la page css...
#logo{
width:386px;
margin:0 auto 0 auto;
padding:0;
}
#logo a{
display:block;
background:url(/images/logo.jpg) no-repeat;
height:81px;
margin:0 auto 0 auto;
}
#logo span{
display:none;
}
#logo img{
border:none;
}
pour le fond d'ecran je te laisse chercher un petit peu...
zola-x304
Messages postés
35
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
7 avril 2009
6 oct. 2008 à 18:21
6 oct. 2008 à 18:21
Je suis dessoler mai je vois pas tro se que tu veut dire j'ai oublier de préciser mai je sui un débutant en se qui concerne le html et le css donc je vois pas trot se que je doit faire, il y aurai pas moyen que je t'envoye mon dossier et que tu me le modifie ??
hani_
Messages postés
333
Date d'inscription
lundi 22 septembre 2008
Statut
Membre
Dernière intervention
18 novembre 2009
20
7 oct. 2008 à 17:07
7 oct. 2008 à 17:07
le plus simple... telecharge firebug (add-on firefox)
il te montrera le code source des site bien indenté, et te montrera aussi le css du site en question...
je te conseille aussi la google bar (pour le page rank)
et la web developper toolbar (firefox)
et passe beaucoup de temps sur les tutos...
il te montrera le code source des site bien indenté, et te montrera aussi le css du site en question...
je te conseille aussi la google bar (pour le page rank)
et la web developper toolbar (firefox)
et passe beaucoup de temps sur les tutos...
