Insérer une seule image sur son site [Résolu/Fermé]

Signaler
Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012
-
Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012
-
Bonjour,

Je voulais savoir comment faire pour placer une seule image, comme fond d'écran (fullscreen ou pleine grandeur), sur son site web et non plusieurs une à côté de l'autre qui se répètent.

Merci


6 réponses

Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
Salut

cela peut ce faire tres simplement en CSS !
Exemple

regarde le code source !
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 62248 internautes nous ont dit merci ce mois-ci

Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012

Ok cest bon, ça marché, cependant, est-ce normal que mon arriere-plan est un contour MINIME en blanc, ...
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
Ok cest bon, ça marché, cependant, est-ce normal que mon arriere-plan est un contour MINIME en blanc, .

non !!
quand tu vas voir mon exemple tu n a pas de bordure ??
Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012

Je vois ben ça... Je ne sais pas pourquoi que ça me fait ça...
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
il doit y avoir du css sur le body ou le html !

tu aurais un lien vers cette page ?
ou cole le code ici !

a+
Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012

Voici se que je marque pour mettre mon arriere-plan:

<html>
<head><title>Muraille</title></head>
<body>





<div class="background">
<img class="full screen image" src="Muraille.jpg" alt="" />
</div>




<head>

<style type="text/css">
background-image {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}

.screen {
height: 100%;
}

.image {
width: 100%;
}

.full {
width: 100%;
height: 100%;
}
</style>
</head>








</body>
</html>
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
;-))))))))))

oula !!
faut arreter le "pot" cousin d 'outre atlantique !! ;-))

tu est sur que tu as lu ce que j ai mis plus haut ?

je n ai jamais dis de metre des balise <head> dans le body !!??

mais de mettre les css entre les balise <head>

comme ca !

<!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" xml:lang="en" lang="en">
  <head>
    <title>
      Muraille
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    background-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    }

    .screen {
    height: 100%;
    }

    .image {
    width: 100%;
    }

    .full {
    width: 100%;
    height: 100%;
    }
    </style>
  </head>
  <body>
    <div class="background">
      <img class="full screen image" src="Muraille.jpg" alt="" />
    </div>
  </body>
</html>


a+
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 62248 internautes nous ont dit merci ce mois-ci

Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012

Merci pour ta réponse mais, Même résultat,l'image occupe toute la place et il a encore un contour en blanc...
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
tu est sur que ce n est pas l image qui a une bordure ??
tu as essaye avec une autre image !

tu n a pas un lien que je vois ca ??
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
ok tu m a induis en erreur et j ai recopier le CSS que tu avais mis background-image

a la place de
background

tu met donc background

Ecoute on vas pas ce prendre la tete ;-))

voila la page xhtml transitional et une image Muraille.jpg , tu met ton image a la place c est tout , et dis moi si tu as une bordure , moi non !

Telecharge les fichiers


a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une.♣
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 62248 internautes nous ont dit merci ce mois-ci

Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012

J'aurais une autre question si ça ne te dérange pas....
Si je veux écrire dessus mon image de fond , comment puis-je faire?
J'ai essayé de regarder ton exemple que tu m'as donné plutôt mais rien apparait dessus mon image. C'est comme si j'écrivais en dessous de l'image, donc je ne vois pas se que je marque.... merci
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
oui cela vient du z-index de la div "background"!

pour corriger cela , tu ajoute une div qui vas contenir tout le reste de la page , et tu lui donne un z-index plus eleve que la div background !

DANS L EXEMPLE CI DESSOUS ,
j ai donne l id ="site" a cette cette div
et je lui est donne en CSS des dimensions , centre , et mis une bordure pour que tu la voie bien , a toi de faire comme tu veux ,
mais ce qui est important , c est de bien mettre un z-index + eleve que celui de la div background pour que cela passe au dessus de l image !
ca donne

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>
      Muraille
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    background {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;     /*LE z-index DE L IMAGE DE FOND */
    }

    .screen {
      height: 100%;
    }

    .image {
      width: 100%;
    }

    .full {
      width: 100%;
      height: 100%;
    }

    /* CSS POUR LA DIV DU CONTENU AVEC z-index: SUPERIEUR A CELUI DE  background */

    div#site{
      z-index: 10;  /* LE z-index DU CONTENU POUR PASSER AU DESSUS  */
      width: 900px;
      height: 600px;
      margin: 30px auto;
      border: solid 2px #000000;
    }
    /* CSS POUR LA DIV DU CONTENU AVEC z-index: SUPERIEUR A CELUI DE background*/

   </style>
  </head>
  <body>

    <!-- DEBUT DE LA  DIV  DU CONTENU -->
    <div id="site">
      <p>
        Lorem ipsum dolor sit amet
        <br />
        Consectetuer pretium convallis pede ligula
        <br />
        Sapien lorem Nunc lorem Donec
        <br />
        Tortor orci vel cursus Vestibulum
        <br />
        Enim dui adipiscing elit In
        <br />
        Sem Vestibulum Morbi Curabitur nec
        <br />
        Quis ut Vestibulum convallis ligula
        <br />
        Vitae nec rhoncus tellus laoreet
        <br />
      </p>Lorem ipsum dolor sit amet
      <br />
      Consectetuer pretium convallis pede ligula
      <br />
      Sapien lorem Nunc lorem Donec
      <br />
      Tortor orci vel cursus Vestibulum
      <br />
      Enim dui adipiscing elit In
      <br />
      Sem Vestibulum Morbi Curabitur nec
      <br />
      Quis ut Vestibulum convallis ligula
      <br />
      Vitae nec rhoncus tellus laoreet
      <br />
    </div><!-- FIN DE LA  DIV  DU CONTENU -->


    <!-- TU MET LA DIV "background" TOUT EN BAS JUSTE AU DESSUS DU </body>
ET TU NI TOUCHE PLUS  -->
    <div class="background">
      <img class="full screen image" src="Muraille.jpg" alt="" />
    </div>
  </body>
</html>


a+
Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012

Salut,
Je voulais dire dessus (sur) l'image... Car celle-ci apparait au dessus ....

merci
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
Je voulais dire dessus (sur) l'image... Car celle-ci apparait au dessus .... 
?????? au dessus de quoi ?????????
le code que je t ai mis sur le message precedent fait passer la div "site" au dessus et c est dans cette div que tu met tout les elements visible de ta page ,
SAUF LA DIV BACKGROUND !!!
Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012

C'est bon, je viens de comprendre. j'ai regardé tes codes sources et ça la fonctionné. Pas si compliqué lorsque qu'on comprend.....

a+
Messages postés
123
Date d'inscription
mardi 16 décembre 2008
Statut
Membre
Dernière intervention
23 novembre 2012
11
Dans ton fichier de style css :
body {
background-image: url("image.png");
background-repeat: no-repeat;
}


Bonne chance.
Cordialement, Bloops.
Messages postés
13
Date d'inscription
jeudi 5 janvier 2012
Statut
Membre
Dernière intervention
7 janvier 2012

Salut,
Je copie tout ou bien certains éléments car j'ai essayé et ça ne fonctionne pas... J'ai changé image.png pour fichier.jpg , mais ca reste tout blanc sur ma pageweb.....
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
tu as aussi background-size: cover; mais qui ne fonctionne pas partout.

ou sinon avec un truc pas beau dans le genre:

<html> 
<head> 
  <title></title> 
  <style type="text/css" media="screen"> 
    body{ 
      padding:0; 
      margin:0; 
    } 
    img{ 
      position:fixed; 
    } 
  </style> 
</head> 
<body> 
  <img src="http://lorempixel.com/640/480" height="100%" width="100%"/> 
  <div style="height:4000px"></div>
</body> 
</html> 
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
Comme j'ai rien à faire de mieux, je te propose une version améliorée qui fera fureur dans -10ans.

<html> 
<head> 
  <title></title> 
  <script type="text/javascript">
    function init(){
      timer = setInterval(run, 20);
    }
    function run(){
      var alienWidth = 150;
      var left = parseInt(document.getElementById('walker').style.left);
      if(left > window.innerWidth + alienWidth){
        document.getElementById('walker').style.left = -130 + 'px';
      }else{
        document.getElementById('walker').style.left = left + 1 + 'px';
      }
    }
    var timer = false;
  </script>
  <style type="text/css" media="screen"> 
    body{ 
      padding:0; 
      margin:0; 
    } 
    #bg{ 
      position:fixed; 
    }
    #walker{position:fixed; z-index:8999; bottom:-10px; }
  </style> 
</head> 
<body onload="init()"> 
  <img id="bg" src="http://lorempixel.com/640/480" height="100%" width="100%"/> 
  <div style="height:4000px"></div>
  <img style="left:-100px;"id="walker" src="http://netanimations.net/baby-alien-walking.gif"/>
</body> 
</html>