28172 sujets

CSS et mise en forme, CSS3

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 ?
Je n'arrive pas a mettre l'image de fond sur toute la page
L'image se met en fond plusieurs fois pour remplir la page.
Modifié par Max17 (09 Apr 2019 - 15:44)
Modérateur
Salut,

Max17 a écrit :
Je n'arrive pas a mettre l'image de fond sur toute la page
L'image se met en fond plusieurs fois pour remplir la page.

Ton image est trop petite (enfin, plus petite que ton écran quoi.
Pour qu'elle couvre tout l'écran il faut rajouter background-size. Mais si elle est vraiment plus petite, elle sera étirée et sera floue.
HTML :

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


CSS :

.banniere { 
  background: url("") #99f repeat-y fixed; 
}


Je n'arrive pas a mettre l'image de fond sur toute la page.
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");
}
Modérateur
Salut,

Je veux bien recoller mon message mais je préfère te dire de le relire.

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

- Entre les guillemets il faut mettre l'url de ton image
- "#99F" ca viens faire quoi ici ?
- pourquoi mettre un repeat-y si tu ne veux pas que ca se repeat

Et dans ton second code :
background-image: url(".jpg");

- On note un effort dans l'url mais c'est toujours pas ca...

Regarde l'exemple de JENCAL :
background-image: url("paper.gif");
Oui, sauf que l'image remplie toute la page et le menu déroulant (en haut) cache une petite partie, et lorsqu'on descend, il y a une nouvelle fois la même image collée.

Comment décaler juste en dessous de sorte à tout voir, et ne pas avoir d'image à la suite ou une autre image ?
background:url('mon_image.jpg') no-repeat center center;
background-size:cover;

Modifié par Pedrothelion (12 Apr 2019 - 17:25)