28172 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et à tous, Placer une image de fond sur body Je dis

Bonjour à toutes et à tous,

Placer une image de fond sur body

Je dispose d'une image *.jpg de taille 1x2 pixels. Ne sachant pas où la placer, je l'ai placée dans le réppertoire qui contient le fichier index.html et dans le dossier CSS.
Problème
Je n'arrive pas à l'utiliser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Couleur du fond</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css"
	title="simple" href="CSS/styles.css" />
</head>
<body>

<h1>Test de la couleur de fond</h1>
<p> bg_hover.jpg est une image de 1x20 pixel, dégradée sur la partie haute
</p>
	
</body>
</html>


/* Couleur de fond */
body{
	background-image:url("bg_hover.jpg") 0 -30px repeat-x;
	background-repeat: repeat-x;
	}


Où est l'erreur ?
(je n'arrive pas à joindre l'image)

Avec mes remerciements
Cordialement
Papy
Modérateur
Bonjour,

D'après ce que j'ai compris votre image est dans le dossier principal et votre CSS dans un sous dossier.
L'appelle de l'image se fait depuis le css donc depuis CSS/stylesheet.css et [b]background-image:url("bg_hover.jpg") 0 -30px repeat-x;[/i] la cherche dans le dossier ou est stylesheet.css or l'image est un cran au dessus.

background-image:url("../bg_hover.jpg") 0 -30px repeat-x;


../
permet de remonter dans l’arborescence pour aller cherche l'image; de la même façon que 
CSS/
dans [b]href="CSS/styles.css"[/i] permet de descendre dans l’arborescence.
Modifié par _laurent (26 Jul 2012 - 12:03)
Modérateur
De plus, creer un dossier image serait approprié :

Niveau 1 : fichiers html etc (sous reserve d'un nombre de page moindre)
Niveau 2 : Dossier "images"
Niveau 2 : Dossier "css"
Niveau 2 : Dossier "js"

Du coup pour accéder aux images depuis le CSS il suffit de remonter un niveau (sortir du dossier CSS), puis de redescendre dans le dossier image :

background-image:url("../images/bg_hover.jpg")


Depuis le html il suffit de descendre dans le dossier image car les fichier HTML sont au niveau 1.

J’espère avoir été clair...
Solution

Au départ j'avais écrit : background-image:url("bg_hover.jpg") 0 -30px repeat-x;

Mes difficultés sont dues à : 0 -30px repeat-x , que j'ai supprimé ;

Maintenant je peux placer l’image dans le dossier contenant index.html, dans les dossiers CSS et images.
Synthhèse :

bg_hover.jpg est une image de 1x20 pixel, dégradée sur la partie haute.

background-image:url("bg_hover.jpg"); affiche l'image si elle est dans le dossier CSS  <br />

background-image:url("../bg_hover.jpg");  affiche le fond  si l'image est dans le dossier contenant index.html <br />

background-image:url("../images/bg_hover.jpg"); affiche l'image si elle est dans le dossier images


Cordialement
Papy
background-image:url("bg_hover.jpg");
background-position:0 -30px;
background-repeat:repeat-x;


ou en une seule propriété :

background:url("bg_hover.jpg") 0 -30px repeat-x;
Sujet clos
Aller à