Image de fond probleme sur le forum Création de sites web - 30-01-2013 12:49:58

Liste des sujets

Image de fond probleme

[cariboo]

Niveau 9

30 janvier 2013 à 12:49:58

Bonjour tout le monde,j'ai un petite probleme.Je veux me lancer dans la creation de site ,j'ai trouvé des sites qui explique bien mais voilà je bloque sur un truc.

J'utilise notepad++.

Et pour mettre une image de fond on a besoin que de la page en css ou a t'on besoin aussi du html?

J'ai mis ça dans le css : background-image: url(Images/nom de l'images qui est sur mon pc rangé dans mes images )

Et il se passe rien ,j'ai juste le fond blanc s'est tout .

L'image est ce qu'il faut la mettre dans un endroit précis?
Quelqu'un pourrait il me dire exactement comment procéder svp ?Si possible avec des exemples..

Merci d'avance ,ça fait des jours que j'arrive pas à résoudres mon probleme.

Tiddo

Niveau 10

30 janvier 2013 à 12:51:10

Tu as juste le fond blanc sur quoi ? Puisque tu dis ne pas utiliser de page html...

[cariboo]

Niveau 9

30 janvier 2013 à 12:57:40

non je veux dire je l'utilise aussi mais j'utilise le css pour essayer de mettre une image de fond .

Desoler je me suis mal expliquer.

En fait j'ai ça :

<!DOCTYPE html>
<html>

<title>titre</title>
<h1>Le titre de mon site</h1>
</head>
<body>

<p>Bonjour et bienvenue sur mon site.</p> <br />
</body>
</html>

Et pour le css j'ai :

h1{
font-size: 100px; titre en 100 pixel;

text-align: center; titre aligné au centre;

color: blue; titre en couleur bleu;
}

body
{
background-image: url(Images/titre de l'image qui ait sur mon pc .jpg);

}

Et j'ai juste mon titre qui est en 100 pixel ,aligné au centre et en bleu avec en dessous marqué Bonjour et bienvenue sur mon site .Et j'ai un fond blanc, l'image que je veux mettre en arriére n'apparait pas.

Tiddo

Niveau 10

30 janvier 2013 à 12:58:15

Dans le cas où c'est moi qui aurait mal compris, il faut bien évidemment cibler une balise HTML pour pouvoir appliquer le background-image, comme le body.

[cariboo]

Niveau 9

30 janvier 2013 à 14:51:46

Personne peut m'aider svp ?
Tiddo si t'es toujours là??
sinon si quelqu'un d'autres peut m'aider svp?

Merci d'avance pour les réponses.

Tiddo

Niveau 10

30 janvier 2013 à 16:18:53

Je viens de te donner une piste.

[darkiron]

Niveau 7

30 janvier 2013 à 17:05:11

ta sémantique est pourrave.
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

[cariboo]

Niveau 9

30 janvier 2013 à 18:07:31

Merci mais comme je débute ,j'ai un peu de mal ,du coup je comprends pas comment faire pour cibler une balise HTML pour pouvoir appliquer mon background-image

vava740

Niveau 10

30 janvier 2013 à 20:45:23

Le chemin de l'image est relatif par rapport au fichier depuis lequel tu fais le lien.

Si dans ta page HTML tu mets "images/nom-de-l-image.jpg", tu dois avoir un dossier "images" à côté de ta page HTML qui contient "nom-de-l-image.jpg".

[cariboo]

Niveau 9

31 janvier 2013 à 08:02:53

Merci s'est gentil mais j'ai toujours pas compris,J'ai une pahe en html et une autre en css dans notepad++ et maintenant j'ai le nom de l'image .jpg aussi dedans .Est ce ça ,aprés je sais pas si il faut rajouter quelques choses dans html , car j'ai mit background-image: url(images/nom de l'image.jpg);Est ce que l'image il faut la mettre quelques part sur mon pc ,dans un dossier de notepad ++ ? Ou le dossier images s'est dans notepad++ directement?Je debute et du coup je galere et j'ai du mal pour les images .J'ai beau regarder différent site, essayez differente méthode , mon image de fond ne s'affiche pas.

Merci d'avance pour vos réponses.

[cariboo]

Niveau 9

31 janvier 2013 à 08:04:23

J'ai mit background-image: url(images/nom de l'image.jpg) dans la page css et s'est tout.

vava740

Niveau 10

31 janvier 2013 à 09:14:04

Il faut donc que tu ais un sous-dossier "images" dans le même dossier que ta page HTML, qui contienne ton image.

[cariboo]

Niveau 9

31 janvier 2013 à 17:00:01

Merci beaucoups vava ,j'y suis arrivé, par contre pour mettre une image je comprends, j'arrive aussi à changer la taille mais comment faire pour centrer l'image et la mettre tout en haut de la page svp.J'essaye mais malgrés tous les sites ou je suis allé ,j'arrive pas ça marche pas.

vava740

Niveau 10

31 janvier 2013 à 19:06:12

Les éléments de ta page s'affichent dans l'ordre où tu les a écrit dans le HTML... si tu met ton image juste après l'ouverture du <body> elle devrait être en haut

oga95

Niveau 10

02 février 2013 à 17:58:39

Voila comment tu peux faire pour centrer:

background: $color $img $repeat $horizontal $vertical;

Maintenant les details:
Background et non background-color, ça permet en une ligne d'utiliser plusieurs attribus.

$color: Il s'agit de la couleur que tu souhaites avoir si ton image n'est pas affiché. Tu peux utiliser transparent où ne rien mettre du tout si tu n'en souhaite pas.

$img: lien vers ton image soit url('/images/nom-de-l-image.jpg') dans ton cas.

$repeat: si l'image est plus petite que son conteneur, tu peux lui demandé de la répété d'une certaine façon (vide = repeat (répétition sur les deux axes) ) tel que repeat-x ou repeat-y, si tu n'en veux pas, utilise no-repeat.

$horizontal: tu peux décaler ton image horizontalement avec ce paramètre. En pixel (15px), en pourcentage(24%) ou en lettre (right) pour modifier le paramètre de base qui est à gauche.

$vertical: de même mais pour l'axe verticale, tu peux donc choisir le décalement verticale, par défaut en haut.

Ce qui devrait te donner quelque chose comme ça:

background: #212121 url('/images/nom-de-l-image.jpg') no-repeat 50% 50%;

Tu obtiendras une image de fond qui ne se répète pas, qui est centré verticalement ainsi qu'horizontalement. Si l'image n'est pas affiché, tu auras une couleur correspondant au code hexadécimal 212121.

Plus de détails:
http://www.w3schools.com/css/css_background.asp

oga95

Niveau 10

02 février 2013 à 18:01:40

Pour le positionnement dans la page:
<body>
<h1></h1>
<p></p>
<ton conteneur avec ton background>
</body>

Tu afficheras ton image apres le titre (h1) et apres le paragraphe (p).
Si tu souhaites l'afficher avant ton texte, il te suffit dans ton html de modifier son emplacement comme ceci:

De même avant le titre :
<body>
<ton conteneur avec ton background>
<h1></h1>
<p></p>
</body>

[cariboo]

Niveau 9

04 février 2013 à 18:06:51

Merci beaucoups pour toutes l'aide, j'y suis arrivé mais j'ai un autre soucis .Je sais pas du tout comment genre créait un sous titre le mettre à gauche et pouvoir y rentrer dedans et affiché ainsi une autre page du site..

Aide à l'achat Mac
Création de sites web
Création de Jeux
Linux
Programmation
Internet
Steam Deck
Macintosh
Hardware

La vidéo du moment

News jeu

77 908 spectateurs

Ce jeu vidéo Netflix vous harcèle au téléphone et fait de vous une véritable victime...

Si vous aimez les frissons, Unhinged va sérieusement mettre vos nerfs à rude épreuve ! Le studio Night School Studio a conçu un huis clos macabre dans lequel chaque nouvelle sonnerie de téléphone annonce un danger mortel pour l'héroïne du jeu.

Toutes les news jeu