Creation site web spécial [Résolu/Fermé]

Signaler
-
Messages postés
4
Date d'inscription
lundi 15 octobre 2012
Statut
Membre
Dernière intervention
15 octobre 2012
-
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>

4 réponses

Messages postés
327
Date d'inscription
mardi 9 octobre 2007
Statut
Membre
Dernière intervention
31 janvier 2014
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.
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 333
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. ♣
je vais apprendre les bases du HTML5 pour comprendre et savoir placer ces bouts de codes.
Merci beaucoup
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 333
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+
Messages postés
4
Date d'inscription
lundi 15 octobre 2012
Statut
Membre
Dernière intervention
15 octobre 2012

Vous pouvez utilisé le logiciel Muse de Adobe (sans programmation)

ou

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