Creation site web spécial

Résolu
Utilisateur anonyme -  
amixpress Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour, je cherche a créer un site web très simple (une image en arrière plan et un seul lien). Je cherche a savoir comment faire pour adapter l'arrière plan à la taille du navigateur quel qu'il soit (comme par exemple sur ce site https://www.bobbies.com/fr/ ).
Je n'ai aucune connaissance particulière en language de programmation malheureusement :s
existe-t-il une logiciel permettant de faire la même chose que ce site. La seule chose que je sais,c'est que la partie du code qui s'en occupe est en javascript
voila le code de ce qui m'interesse (si ça peut aider)

<img class="vegas-background" style="position: fixed; left: 0px; top: -250.71875px; width: 1263px; height: 710.4375px; bottom: auto; right: auto; " src="http://www.bobbies.fr/themes/bobbiesv5/img/imghome/rand/22.jpg">

Merci d'avance


<config>Windows XP / Chrome 22.0.1229.94</config>
A voir également:

4 réponses

Réponse 1 / 4
Dj Nam Messages postés 327 Date d'inscription   Statut Membre Dernière intervention   41
 
Bonjour,

Pour que l'image soit de la largeur de l'écran il faut dans un premier temps, non pas utiliser une balise img mais appliquer l'image en arrière-plan sur la balise Body, puis tu peux ajouter le CSS background-size, comme ceci : 
<body style="background-size:100% 100%;background:url(http://www.bobbies.fr/themes/bobbiesv5/img/imghome/rand/22.jpg) no-repeat top left;"> 
Ton contenu
</body>

Par contre, cet affichage ne sera malheureusement pas correcte sous Internet Explorer 8 et inférieur. Par contre l'affichage sera OK sur FireFox, Chrome et Safari.
0
Réponse 2 / 4
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut

plusieurs possibilites sans js !

2 Exemples

HTML5 +CSS 3 

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--[if IE]> 
    <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
    <![endif]--> 
     <title> 
      full background 
    </title> 
    <style type="text/css"> 
/*<![CDATA[*/ 
     html { 
    background:url(https://travellerz.de/ no-repeat center top #000; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    } 
    body { 
    margin: 0px; 
    border: none; 
    padding: 0px; 
    font-family: Helvetica, Verdana, Geneva, sans-serif; 
    font-size: 11pt; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 

    } 
    /*]]>*/ 
    </style> 
  </head> 
  <body> 
    <div class="page"></div> 
  </body> 
</html>


XHTML CSS2.1 

<!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> 
      RAD ZONE Webcreation 
    </title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <style type="text/css"> 
  /*<![CDATA[*/ 
  .background { 
    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="page"></div> 
    <div class="background"> 
      <img class="full screen image" src="https://travellerz.de/" alt="" /> 
    </div> 
  </body> 
</html>


a+



♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
Réponse 3 / 4
Utilisateur anonyme
 
je vais apprendre les bases du HTML5 pour comprendre et savoir placer ces bouts de codes.
Merci beaucoup
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut 
je vais apprendre les bases du HTML5

Dans ce cas precis c est du cote du CSS3 qu il faut que tu te penche ,
le Doctype n a aucune incidence, car dans mon exemple , bien que ce soit un doctype html5 cela n a aucune importance puisque aucune balise presente n est specifique au html5 ! ;-)) !

a+
0
Réponse 4 / 4
amixpress Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
Vous pouvez utilisé le logiciel Muse de Adobe (sans programmation)

ou

Visitez http://www.hoxital.fr pour la création Site Internet en France
0

Discussions similaires

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

2 réponses