Partage
  • Partager sur Facebook
  • Partager sur Twitter

Fond Image CSS

8 avril 2019 à 13:46:39

Bonjour, 

Je sais mettre une couleur de fond mais pas une image. 
Comment mettre une image de fond en CSS, sur 1 seul page ? 

background-image ?
  • Partager sur Facebook
  • Partager sur Twitter
8 avril 2019 à 13:58:04

Bonjour,

https://developer.mozilla.org/fr/docs/Web/CSS/background

  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

8 avril 2019 à 13:58:15

Bonjour,

Il faut utiliser "background-image:url(images/image_de_fond.png);"

  • Partager sur Facebook
  • Partager sur Twitter
8 avril 2019 à 14:28:11

<p class="banniere">
  Test<br/>
  Test<br/>
  Test
</p>

.banniere { 
  background: url("") #99f repeat-y fixed; 
}
Je n'arrive pas a mettre l'image de fond sur toute la page.

-
Edité par Alex0123 8 avril 2019 à 14:29:00

  • Partager sur Facebook
  • Partager sur Twitter
8 avril 2019 à 15:13:13

teste comme ceci

background: #99f url("") repeat-y fixed;

  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

8 avril 2019 à 15:16:55

Ça fait exactement pareil. Je voudrais que l'image remplisse toute la page en fond

-
Edité par Alex0123 8 avril 2019 à 15:18:14

  • Partager sur Facebook
  • Partager sur Twitter
8 avril 2019 à 15:33:17

lol

Mais ca c'est normal tu dit au navigateur de remplir l'image sur l'Axe "y" donc verticale.

tiens et pense a coller ton post en résolu si ca te conviens ;)

background: #99f url("") repeat fixed;

  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

8 avril 2019 à 15:46:55

HTML :

<!DOCTYPE html>
<html>
    <head>
    <title>Le fond</title>
<meta charset= "utf-8">
<link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Image de fond</h1>
</body>
</html>

CSS :

body{
background-image: url(".jpg");
}

L'image se met en fond plusieurs fois pour remplir la page.

PS : désolé pour le code j'ai un bug

-
Edité par Alex0123 9 avril 2019 à 15:44:33

  • Partager sur Facebook
  • Partager sur Twitter
9 avril 2019 à 18:09:49

body{
background-image: url(".jpg");
background-size: 100%;
}
  • Partager sur Facebook
  • Partager sur Twitter
9 avril 2019 à 19:12:33

Normalement ça rempli toute la page.
  • Partager sur Facebook
  • Partager sur Twitter
9 avril 2019 à 19:25:32

non ca va être proportionnel à la zone dédier.

 cover ca va remplir l’ensemble

https://developer.mozilla.org/fr/docs/Web/CSS/background-size

  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

9 avril 2019 à 19:32:36

Oui, car après quand on descend, comme il ya qu'une seule image, ça va être vide
  • Partager sur Facebook
  • Partager sur Twitter
9 avril 2019 à 19:35:27

apres tu peut penser a la position fixed ce qui fait que quand tu descend ton background lui reste visible.
  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

9 avril 2019 à 19:52:19

Oui, que quand tu descend, l'image descends en même temps
  • Partager sur Facebook
  • Partager sur Twitter
9 avril 2019 à 20:09:55

Et la avec un large sourire pervers je lâche le mot PARALAX ..... Tu pourras aller voir ce que c'est ca va te faire halluciner.

Revenons en a ton histoire teste ceci :

background-image: url("assets/img/logos.jpg");

background-size: cover;

background-attachment: fixed;

  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

9 avril 2019 à 20:32:41

On peut decendre avec l'image ou aussi : https://homo-ethicus.fr/

  • Partager sur Facebook
  • Partager sur Twitter
9 avril 2019 à 20:34:32

Oui c'est çà l'effet paralax
  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

9 avril 2019 à 20:43:42

Et tu saurais comment on fait ?

https://www.youtube.com/watch?v=W-sTJ2_zDs4 : mais j'ai des problèmes...

  • Partager sur Facebook
  • Partager sur Twitter
9 avril 2019 à 20:59:35

tiens un vieux truc

https://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript

  • Partager sur Facebook
  • Partager sur Twitter

Compos sui.

9 avril 2019 à 21:01:28

body{ background-image: url(".jpg"); background-size: 100%; }

-
Edité par Alex0123 10 avril 2019 à 19:26:17

  • Partager sur Facebook
  • Partager sur Twitter