Insérer une seule image sur son site

Résolu/Fermé

québec_1 Messages postés 13 Date d'inscription jeudi 5 janvier 2012 Statut Membre Dernière intervention 7 janvier 2012 - 5 janv. 2012 à 20:45
québec_1 Messages postés 13 Date d'inscription jeudi 5 janvier 2012 Statut Membre Dernière intervention 7 janvier 2012 - 7 janv. 2012 à 19:33

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:

Insérer une seule image sur son site
Site de telechargement - Accueil - Outils
Insérer une vidéo sur powerpoint - Guide
Site comme coco - Accueil - Réseaux sociaux
Insérer signature word - Guide
Comment inserer une image sur word - Guide

6 réponses

Réponse 1 / 6

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
5 janv. 2012 à 21:19

Salut

cela peut ce faire tres simplement en CSS !
Exemple

regarde le code source !

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 5/01/2012 à 21:21

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

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
5 janv. 2012 à 21:25

oui , mais moi qui utilise noscript ,
ou tout utilisateur sans js a une grande image pas belle ;-)

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 5/01/2012 à 21:38

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 =)

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
5 janv. 2012 à 21:45

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 ,

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 5/01/2012 à 22:13

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)

Réponse 2 / 6

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
6 janv. 2012 à 22:47

;-))))))))))

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>

québec_1 Messages postés 13 Date d'inscription jeudi 5 janvier 2012 Statut Membre Dernière intervention 7 janvier 2012
6 janv. 2012 à 22:56

Merci pour ta réponse mais, Même résultat,l'image occupe toute la place et il a encore un contour en blanc...

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
6 janv. 2012 à 22:59

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 ??

Réponse 3 / 6

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 6/01/2012 à 23:29

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.♣

québec_1 Messages postés 13 Date d'inscription jeudi 5 janvier 2012 Statut Membre Dernière intervention 7 janvier 2012
7 janv. 2012 à 03:26

Bon enfin, ça fonctionne, aucune bordure apparait....
Merci

québec_1 Messages postés 13 Date d'inscription jeudi 5 janvier 2012 Statut Membre Dernière intervention 7 janvier 2012
7 janv. 2012 à 04:21

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

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 janv. 2012 à 11:02

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>

québec_1 Messages postés 13 Date d'inscription jeudi 5 janvier 2012 Statut Membre Dernière intervention 7 janvier 2012
7 janv. 2012 à 17:09

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

merci

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 janv. 2012 à 17:39

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 !!!

Réponse 4 / 6

bl00p's Messages postés 118 Date d'inscription mardi 16 décembre 2008 Statut Membre Dernière intervention 23 novembre 2012 11
5 janv. 2012 à 20:47

Dans ton fichier de style css :

body {
background-image: url("image.png");
background-repeat: no-repeat;
}

Bonne chance.
Cordialement, Bloops.

québec_1 Messages postés 13 Date d'inscription jeudi 5 janvier 2012 Statut Membre Dernière intervention 7 janvier 2012
6 janv. 2012 à 01:29

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.....

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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 5/01/2012 à 20:54

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>

Réponse 6 / 6

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
5 janv. 2012 à 21:11

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>

Discussions similaires

Nouveau coco tchat ?

Retrouver l'image originale après avoir fait des modifications ?

[SUJET GROUPÉ] Le site COCO.GG est définitivement fermé.

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire