Aller au contenu

Images de fond : ne pas mettre en mosaique


hegalaldia

Sujets conseillés

Slt

Sur notre site, en fond de page, j'ai mis cette image

mini_090708011127750174032291.jpg

Dans mon CSS, pour l'image de fond j'ai mis ce code:

background-repeat:repeat;
background-position:top;

Mais l'image est en mosaique. Comme c'est pas une image unie, en mosaique ca fait pas jolie. J'aimerais que l'image prenne tout l'ecran mais qu'elle ne bouge pas si le texte doit descendre. Si je met no-repat a background-repeat l'image va rester en haut. J'arrive pas a trouver comment faire.

Merci d'avance pour votre aide.

Lien vers le commentaire
Partager sur d’autres sites

Salut

Il faut prendre une image qui soit plus grande que la taille maximale des ecrans donc une image qui dépasse 1900x1400px (à vérifier) cela risque d'alourdir ta page, je ne sais pas s'il n'y a pas de solution en passant par javascript un truc du genre qui détecte la résolution de l'écran et qui redimensionne par css l'image!

En attendant d'autres avis!

A+

Modifié par dragondz
Lien vers le commentaire
Partager sur d’autres sites

Malheureusement, il faut augmenter la taille de l'image. Cela va te permettre, entre autres, de contrôler la qualité de l'image.

Lien vers le commentaire
Partager sur d’autres sites

Salut,

Tu ne peux pas étirer une image en background sur tout l'écran, c'est impossible en CSS2.

Il y a quand même la solution de mettre l'image en 100% dans un div qui fait 100% du body, puis placer le reste du contenu par-dessus en positions absolute. Ca peut servir mais ce n'est vraiment pas souple du tout. A consommer avec modération donc.

Modifié par Ernestine
Lien vers le commentaire
Partager sur d’autres sites

Perso, j'utilise :

1) une couleur de fond compatible avec le fond en image,

2) une image de 1700x1100 (les résolutions supérieures voient l'image + la couleur de fond)

3) 2 traits de pinceau flou à gauche et à droite de l'image de fond pour assurer la transition avec la couleur de fond

4) le code CSS suivant :

body {
background:url(fond.jpg) top center no-repeat;
background-attachment: fixed;
}

Exemple à voir ici, entre autres.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...

Merci pour vos reponses. Mon souci c'est pas que je veux que l'image prenne tout l'ecran, elle le prend deja. Mon souci c'est que j'aimerais eviter la mozaique et que lorsque le contenu de la page defile l'image de fond suive le contenu.

Lien vers le commentaire
Partager sur d’autres sites

J'aimerais que l'image prenne tout l'ecran
c'est pas que je veux que l'image prenne tout l'ecran, elle le prend deja

Avoue qu'il va être difficile de t'aider avec de telles contradictions ;)

Si tu as un exemple à montrer, je crois que ce serait plus simple.

Lien vers le commentaire
Partager sur d’autres sites

Merci pour vos reponses. Mon souci c'est pas que je veux que l'image prenne tout l'ecran, elle le prend deja. Mon souci c'est que j'aimerais eviter la mozaique et que lorsque le contenu de la page defile l'image de fond suive le contenu.

Donc, si on résume :

1) pas de mozaïque

2) image de fond fixe

C'est bien ça ?

Si oui, la solution est dans mon précédent post (#5) :)

Lien vers le commentaire
Partager sur d’autres sites

Donc, si on résume :

1) pas de mozaïque

2) image de fond fixe

C'est bien ça ?

Si oui, la solution est dans mon précédent post (#5) :)

Quand tu dit image de fond fixe. Tu entend quoi ? pour moi ca veux dire que lorsque il y a beaucoup de texte et qu'on descend pour le lire, l'image de fond reste visible. Pas qu'elle reste a son emplacement et qu'elle disparaisse quant on descend. Je sais pas si c'est clair mon explication :):wacko: sinon oui c'est bien ca pour le reste. J'ai pas eu trop le temps de m'en occuper en suivant ta solution de ton post 5.

Lien vers le commentaire
Partager sur d’autres sites

Quand tu dit image de fond fixe. Tu entend quoi ? pour moi ca veux dire que lorsque il y a beaucoup de texte et qu'on descend pour le lire, l'image de fond reste visible. Pas qu'elle reste a son emplacement et qu'elle disparaisse quant on descend. Je sais pas si c'est clair mon explication :):wacko: sinon oui c'est bien ca pour le reste. J'ai pas eu trop le temps de m'en occuper en suivant ta solution de ton post 5.

Ce que tu ne comprend pas dans ce qu'il t'as été expliqué.

Le background fixed, va "figer ton image... Donc ton defilement de site sera superposé sur ton fond qui lui sera fixe.

Pour ton fond qui doit etre present sans "fixed".... Alors comme dit plus haut, un fond en repeat x et y et qui ne marque pas de cesure.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...