Debian-facile

Bienvenue sur Debian-Facile, site d'aide pour les nouveaux utilisateurs de Debian.

Vous n'êtes pas identifié(e).

#1 26-02-2010 22:17:21

damien
Modo / Rédacteur Wiki
Lieu : St Etienne
Distrib. : Debian Jessie 8
Noyau : Linux 3.16.0-4-amd64
(G)UI : Gnome3
Inscription : 22-09-2008
Site Web

Image de fond "background" qui ne s'étire pas [html]

Bonsoir,

Je cherche à savoir comment étirer l'image de fond sur mon site.
Une image qui prenne toute la taille de l'écran.
Voici le code

<body style="color: black; background-color: rgb(72, 123, 165); background-image: url(images_site/spiralek-cdv5.jpg);" alink="black" link="black" vlink="black"><div style="text-align: center;"><span style="font-family: LMMathItalic10;"></span>
<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
  <tbody>


width: 100% -> pour moi tout est ok
Sauf que non sad
Quand je passe sur un écran 1600x1280, l'image se multiplie.
Pour vérifier, faites un zoom arrière sur mon site, vous constaterez le problème.

Du coup j'ai créé une image avec une résolution de 1600x1280, mais ce n'est pas une solution.

Je n'y comprends pas grand chose en code html sad

Aidez-moi SVP


logo_3dminfographie_signature.png

Hors ligne

#2 26-02-2010 22:33:04

zodar
Membre
Lieu : A coté d'Avignon
Distrib. : Sidux
Noyau : 2.6.34
(G)UI : XFCE4
Inscription : 24-02-2010
Site Web

Re : Image de fond "background" qui ne s'étire pas [html]

Salut,

Pour ton css :
background-repeat:no-repeat; // elle ne se multipliera plus

Maintenant ton image :
En effet, 1600x1280 n'est pas une solution.Mais étirer ton image non plus.
Une image en 1024*768 par exemple. Si tu la fait s'étirer sur un écran beaucoup plus grand elle va perdre en qualité.
Beaucoup trichent sur ce coup. On crée une image avec une dimension X et par dessous une couleur de background de la page html identique au fond de l'image.. ainsi on a l'impression que l'image remplit  la page.

Maintenant si vraiment tu veux étirer l'image, le background-image ne pouvant se répéter, il ne s'étire donc pas. La seule solution est de mettre ton image dans une balise img en position absolue.

Ex :

html :
<img id="bg" src="mon image.jpg" alt="" />

css :
img#bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

A toi de voir .. smile

Dernière modification par zodar (26-02-2010 22:34:17)

Hors ligne

Pied de page des forums