Sujet Précédent Sujet Suivant

Creation site web spécial

Résolu/Fermé
Utilisateur anonyme - Modifié par enzoaguado le 13/10/2012 à 09:26
amixpress Messages postés 4 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 15 octobre 2012 - 15 oct. 2012 à 23:11
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 mardi 9 octobre 2007 Statut Membre Dernière intervention 31 janvier 2014 41
13 oct. 2012 à 09:36
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 samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 13/10/2012 à 10:31
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
15 oct. 2012 à 05:05
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 samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 15/10/2012 à 16:48
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 lundi 15 octobre 2012 Statut Membre Dernière intervention 15 octobre 2012
15 oct. 2012 à 23:11
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