High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Utiliser une image en fond d'ecran en css

Dernière réponse le 7 aoû 2009 à 13:42:00 faamugol, le 6 déc 2007 à 20:03:22 
 Signaler ce message aux modérateurs

Bonjour,

Je voudrais utiliser une image (25x100) comme fond d'ecran des pades du site, pour ce faire en css j'ai fait: 

body {
font-family: Verdana;
font-size: 12px;
margin: 0;
padding: 0;
background-image:url('bg.png');

}


Tout fontionne bien saut que l'image est saut que l'image n'occupe que sa taille réelle sur l'ecran 25x100 et puis elle se repete pour completer le reste de la page.

J'ai tenté des choses comme background-repeat: no-repeat.

Merci d'avance pour vos conseils ,
Configuration: Windows XP
Internet Explorer 7.0

Posez votre question Répondre

1

Soadmystic, le 6 déc 2007 à 20:12:23

Bonjour,

Je sais pas quelle est la meilleures solution mais en tout cas, lorsque ca m'arrive je modifie la taille du document sur Photoshop (à une taille adapté au site).

Ptite question: t'as pas peur qu'on voye les pixels ??? car en voulant la mettre a un format plus grand ca va réduire sa qualité, enfin sauf si c'est en vectoriel.

   
Répondre à Soadmystic

2

faamugol, le 6 déc 2007 à 20:22:42

Merci pour ta reponse Soadmystic,

Mais quand je regarde sur d'autres sites sur interne, ils utilisent des images de petite taille mais pourtant l'image occupe tout l'ecran.
Donc, je suppose qu'il ya une solution.

exemple: http://www.lycos.fr

Meric d'avance pour vos reponses,

   
Répondre à faamugol

3

Dora The Explorer, le 6 déc 2007 à 21:05:46

Salut!

Tu l'as dit toi-même: 

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

C'est sur ces propriétés que ça se joue.

Comprend pas ton problème: tu veux un fond à partir d'une image petite: donc il faut que le fond se répète, non?
Tout fontionne bien saut que l'image est saut que l'image n'occupe que sa taille réelle sur l'ecran 25x100 et puis elle se repete pour completer le reste de la page.
Explicite ton problème ou envoie un lien, une capture d'écran. "Vous avez beaucoup d'avenir derrière vous..."
Comment qu'ça marche là dis-donc.

   
Répondre à Dora The Explorer

4

IgiXcs, le 6 déc 2007 à 21:12:47

Body {
font-family: Verdana;
font-size: 12px;
margin: 0;
padding: 0;
background-image:url('bg.png'); /*On fixe l'image du bg */
background-repeat: no-repeat; /* On ne répètepas l'image */

}

je sais qu'y y a un truc pour la fixed oupas ^^


IgiX :
Avec xp, on était prêt du goufre, maivec vista, on a fait un grand pas en avant ;)

   
Répondre à IgiXcs

5

faamugol, le 6 déc 2007 à 21:24:43
  • +1

Merci encore une ,

je veut que l'image occupe la totalité du fond de l'ecran variable en fonction de la taille de la page web en question.
Mon soucis c'est que l'image n'occupe que l'equivalent de sa taille reelle. Et pour occuper toute la page, elle se repete alors j'ai bien dit
background-repeat: no-repeat; et bien dans ce l'image n'appait qu'une seule fois dans sa taille réelle.

Merci d'avance,

   
Répondre à faamugol

6

Dora The Explorer, le 6 déc 2007 à 21:25:47

je sais qu'y y a un truc pour la fixed oupas 

background-attachment:fixed;
background-attachment:scroll;


EDIT:

Et bien, si tu veux qu'elle se répète: 
background-repeat: repeat-x;
ou 
background-repeat: repeat-y;


no-repeat c'est pour qu'elle ne se répète pas.
Encore une fois explicite ton problème. "Vous avez beaucoup d'avenir derrière vous..."
Comment qu'ça marche là dis-donc.

   
Répondre à Dora The Explorer

7

faamugol, le 6 déc 2007 à 22:29:59

Merci vous tous pour vos reponses,

Ce que je voudrais est ce qui suit:

que l'image de fond s'etire en fonction de la grandeur de la page à afficher.

Mais en cherchant sur internet j'ai lu que cela n'est pas possible en CSS.

Encore une fois merci pour votre temps que vous avez consacré à me répondre.

   
Répondre à faamugol

8

faamugol, le 6 déc 2007 à 22:44:06

Voilà enfin la solution,

body {
font-family: Verdana;
font-size: 12px;
margin: 0;
padding: 0;
background-image:url('bg.png');
background-repeat: repeat-x;
background-color: #C8E6FF;
}

ou background-color: #C8E6FF réprésente la couleur de fond de l'ecran.
ensuite #C8E6FF est la couleur du dernier pixel vers le bas de l'image degradé et le tour est joué en repetant l'image verticalement.

encore une fois merci

   
Répondre à faamugol

9

Gihef, le 7 déc 2007 à 00:03:50
  • +2

Bonjour,

Cette solution ne répond pas précisément à la question.

Alsacréations en propose une autre.

Je lai adaptée dans cet exemple.

À tester.

--

   
Répondre à Gihef

10

Gihef, le 7 déc 2007 à 15:03:18
  • +1

Avec une image de type dégradé, les déformations sont moins vivibles.
Exemple 2.

--

   
Répondre à Gihef

11

lolilol, le 28 fév 2008 à 11:04:55

Y'en à qui ne savent vraiment pas lire ou qui ne prénent pas le temps de comrpendre la question XD

   
Répondre à lolilol

12

 Mario, le 7 aoû 2009 à 13:42:00

Cette page explique les images en arrière plan http://www.formation-css.com/arriere-plan-background.shtml

   
Répondre à Mario
Posez votre question Répondre
Ils ont besoin de votre aide