Insérer une seule image sur son site

Résolu
québec_1 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   -  
québec_1 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   -
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


A voir également:

6 réponses

Réponse 1 / 6
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut

cela peut ce faire tres simplement en CSS !
Exemple

regarde le code source !
1
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Oui,

mais elle est déformée lors du resize. Le mieux reste les solutions javascript dans le genre:
http://nooshu.com/jquery-plug-in-scalable-background-image
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
oui , mais moi qui utilise noscript ,
ou tout utilisateur sans js a une grande image pas belle ;-)
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Les gens qui ont pas JS peuvent surfer nulle part, ou presque.
Au pire faut faire un fallback qui tient la route et c'est réglé.

Et je préfère faire une solution optimale pour le 99% des visiteurs qui ont JS activé, plutot que je faire une solution bancale pour 100% des visiteurs. Après c'est une question de choix =)
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Les gens qui ont pas JS peuvent surfer nulle part, ou presque.

je surf mais je choisi quel js j accepte !
la realisation du site visible et fonctionnel sans js ou plug est dans le cahiers des charges de bien des entreprises cliente d agence de conception !

il y a plus de personnes que l ont pourraient croire qui ne veulent ou le plus souvent ne peuvent
pas ( entreprise ) utiliser js ou des plug ,
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
A chacun ses clients et ses contraintes =)
Edit: je te rejoins sur certains points: Les éléments vitaux du site (navigation, contenu) doivent être accessibles correctement sans JS.

Au niveau visuel, on peut s'en passer (comme les border-radius et autres gradient en CSS3)
0
Réponse 2 / 6
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
;-))))))))))

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
québec_1 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention  
 
Merci pour ta réponse mais, Même résultat,l'image occupe toute la place et il a encore un contour en blanc...
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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 ??
0
Réponse 3 / 6
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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
québec_1 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention  
 
Bon enfin, ça fonctionne, aucune bordure apparait....
Merci
0
québec_1 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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+
0
québec_1 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention  
 
Salut,
Je voulais dire dessus (sur) l'image... Car celle-ci apparait au dessus ....

merci
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
  
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 !!!
0
Réponse 4 / 6
bl00p's Messages postés 118 Date d'inscription   Statut Membre Dernière intervention   11
 
Dans ton fichier de style css : 
body {
background-image: url("image.png");
background-repeat: no-repeat;
}


Bonne chance.
Cordialement, Bloops.
0
québec_1 Messages postés 13 Date d'inscription   Statut Membre Dernière intervention  
 
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.....
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
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>
0
Réponse 6 / 6
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
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>
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses