Image de Fond D'écran sur toute la page

**djamess** · 17/02/2009, 18h35

Bonjour à vous!

J'aimerai que mon image de fond d'écran s'affiche sur toute la page quelque soit la taille et la résolution de l'écran.

J'ai écris dans mon CSS cec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
BODY {
  background: #ffffff;
  color: #000000;
  margin: 53px;
  width: 100%;
  background-image : url('/mon image.jpg'); 
  background-repeat: no-repeat ;
  background-position:top; /* sa position, l'image commence en partant du haut */
 
}

Cepandant sur mon ordinateur portable tout va bien.
Mais quand je regarde ma page web sur un écran 22 pouces là mon image ne s'étire pas. Elle prend juste une partie de l'écran.

Je souhaiterai que quelque soit l'cran et le navigateur mon image de fond puisse s'étire et s'adapter.

Y a-t-il une méthode pour ça?

Merci de vos réponses.

Bonne fin de journée à vous

**desert** · 17/02/2009, 18h52

Malheureusement, le background-image ne peut que se répéter, il ne s'étire donc pas. La seule solution est de mettre ton image dans une balise img en position absolue.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="bg" src="mon image.jpg" alt="" />

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
body, html {
    margin: 0;
    width: 100%;
    height: 100%;
}
 
img#bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

**djamess** · 17/02/2009, 19h12

Merci bcp pour ton aide!
C'est déjà une bonne solution qui me permet d'avancer!
Merci encore

**djamess** · 17/02/2009, 19h45

Ah non je viens de me rendre comte d'un truc très gênant!

Quand je fais ce que tu me proposes ça marche en effet!

mon image de fond prend tout l'écran ça couvre tout!

Cependant je n'arrive pas à remettre en premier plan le reste c'est à dire
mes cadres, mon texte....

Aïe aïe aïe...

**GihefBey** · 17/02/2009, 20h58

Bonjour,

Si tu places ton image en premier dans le <body>, le reste devrait se placer par dessus.
Sinon, ajoute un z-index au contenu.

Des exemples ici avec

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
  <img id="fond" src="imgbg.jpg" alt="l'image de fond" title="l'image de fond" />
  <div id="conteneur">

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    #fond { /* c'est l'image */
      display : block;
      width : 100%;
      height : 100%;
      }

-

**djamess** · 18/02/2009, 11h18

Bonjour GihefBey,

Merci de ta réponse!

Mais comment faut-il faire pour définir un z-index par rapport au code que tu me proposes?

Le z-index va permettre de rammener en premier plan tout le reste du contenu de la page web?

Merci de vos réponses

Image de Fond D'écran sur toute la page

CSS

Vue hybride

Discussions similaires

Partager

Partager