test site extensible html5/css3

**arthuro000** · 19/03/2013, 13h02

Bonjour,

Je développe actuellement un site web en html5/css3 et je souhaiterais de ce site web qu'il est un design extensible.

Pour l'instant je n'ai mis que l'image de fond (background-image), une fois que j'aurais réglé ce problème de design je compte mettre le contenu.

J'ai essayé plusieurs choses mais je reste insatisfaits donc je préfère en parler ici afin d’éclaircir certaine choses, pour bien tout comprendre et pour avoir l'avis de personnes expérimentés.

En premier lieux je souhaiterais uniquement rendre l'image de fond de mon index (donc backgroud-image à l'intérieur de mon <body></body>) entièrement visible quel que soit la résolution de l'utilisateur (donc de 800x600 à 1920x1080) FENETRE DU NAVIGATEUR OUVERTE AU MAXIMUM donc prenant tout l'écran sans que celui-ci ne soit obligé de jouer avec les barres de défilement.

1) Déjà est ce possible ?

Pour l'instant j'arrive bien à afficher entièrement mon image de fond quelle que soit la résolution mais uniquement avec cette fameuse barre de défilement que ce soit horizontale et verticale (j'ai testé)

2) Peux ton parler de design extensible dans ce cas là ?

Voici mon code css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
  body
  {
  background-image:url("fond.jpg"); 
  background-repeat:no-repeat;
  /*background-size: cover;*/
  width: 1920px;
  height: 1200px;
  min-width: 800px;
  max-width: 1920px;
  min-height: 600px;
  max-height: 1200px;
  }

Mon image de fond fait 1900x1200px (à la base j'ai choisis cette dimension afin que même les résolutions les + grandes puissent voir correctement l'image de fond).

La résolution actuelle de mon écran fait 1900x1080.

ps : si je dois passer par un script java pour obtenir ce que je veux pour faire cela de la meilleur manière qu'il soit il n'y a pas de problème, je ne m'y suis pas aventuré pour le moment pensant que l'ont pouvait faire ça avec css3.

merci pour votre aide car là je désespère un peu après avoir essayé beaucoup de choses et j'en ai essayé des choses !

**rodolphebrd** · 19/03/2013, 14h05

Voulez-vous parler de full page background image?

**arthuro000** · 19/03/2013, 17h55

Oui ça a l'air d'être ça, merci pour le lien, j'ai essayé la première technique mais cela ne fonctionne pas vraiment car une fois la fenêtre de mon navigateur agrandit à fond les bordures de mon background-image sont largement rognées par le navigateur en bas

**rodolphebrd** · 19/03/2013, 18h40

Attention à la compatibilité avec les navigateurs....

Le 1er exemple vaut pour IE9 et +

**arthuro000** · 19/03/2013, 19h11

merci à toi mais j'ai trouvé ce qu'il me fallait et ce qui se rapproche le plus de ce que je recherchais, à savoir un simple background-size:contain valeur que je ne connaissait pas

à la prochaine !

test site extensible html5/css3

HTML

Discussions similaires

Partager

Partager