Je voudrais créer un fond de site perso!

Y a t'il une dimension à respecter et le poids?

le faire en .jpg ou .png?

merci de votre aide.

Bonjour,

Il faut qu'il soit le plus léger possible et il faut que se soit bien visible sans pixellisation pour que l'on puisse ouvrir le site rapidement.

Sur l'aide de ton logiciel de site web ça doit être marqué le type de photo aussi.

A+

Bonsoir

Le format jpg est le plus léger, quand aux dimensions je dirais de 1280 X 1024 px, cela me semble judicieux !!

elle a écrit :
Ben pour les dimensions, ça dépend de la dimension du site...

Mais qui peut le plus .....

Message original par leela

Je voudrais créer un fond de site perso!

Y a t'il une dimension à respecter et le poids?

le faire en .jpg ou .png?

Bonjour,

Mon avis : .jpg et 1680 x 1050

@+

merci, pour vos réponses à tous, j'ai noté pour la dimension.

Faut voir aussi si c'est un fond appelé à se répéter ou non...

elle, ça veut dire quoi car j'ai fait il y a quelque temps mon site mais maintenant cela à beaucoup évoluer.

Une image qui se répète, comme celle-ci sur ton site actuel :

Ah, ok je viens d'apprendre un truc... merci elle, c'est super.

Alors si jamais je fais une image qui se répète, que faut'il respecter ?

car je n'ai pas encore fait mon choix!

et comment fait on pour qu'elle se répète? il y a un code?

car si j'en fais une grande 1280x1224 px , je la place et c'est fini. mMais celle qui se répète je ne sais pas !

Bonjour leela,

une solution pour une image la rendre raccordable avec GIMP

Exemple avec GIMP > mappage >rendre raccordable

Bonjour,

Pour répéter l'image il faut l'indiquer dans le CSS. Regarde ici, descends à "background-repeat".

leela a écrit :

Alors si jamais je fais une image qui se répète, que faut'il respecter ?

car je n'ai pas encore fait mon choix!

et comment fait on pour qu'elle se répète? il y a un code?

car si j'en fais une grande 1280x1224 px , je la place et c'est fini. mMais celle qui se répète je ne sais pas !

Pour l'image qui se répète, encore là, ça dépend de ce qu'il doit y avoir dans l'image, mais en 200px x 200px, par exemple, c'est bien... Le code ressemblera à ceci, dans la feuille de styles :

body
{
background-image: url(papier.png);
background-repeat: repeat;
}

Le problème avec une grande image, c'est que tu dois prévoir la taille de chacune de tes pages. Et rien ne garantit que les réglages des navigateurs de tes visiteurs permettront de respecter ces dimensions...

@ BOB, si je la fais avec photoshop ou illustrator je ne trouve pas / mappage/ raccordable?

elle fait quelle taille au départ ton image?

@ D3542 , merci je mets en marque page!

à tous.

Bonjour elle,

Je ne voudrais pas encombrer les réponses pour leela mais une question stp. Des images de fond comme ton exemple j'en ai des centaines. Prenons 200px x 200px. Lorsque l'image se répète on voit toujours la séparation des bords de l'image, il n'y a pas de fondu. Il y a moyen de ne pas avoir ce problème ? Je peux pas mettre d'exemple, je ne suis pas sur mon PC habituel.

Merci

D3542

Il faut des images raccordables, comme dit plus haut par Bob, des images "seamless", en anglais, sans coutures, donc.

leela a écrit :

@ BOB, si je la fais avec photoshop ou illustrator je ne trouve pas / mappage/ raccordable?

elle fait quelle taille au départ ton image?

@ D3542 , merci je mets en marque page!

à tous.

désolé, je ne connais pas photoshop, tu peux poser la question sur le forum multimédia. Concernant la taille, tout dépend du rendu que tu veux faire comme fond de page

Je ne voudrais pas encombrer / non, tu n'encombres rien.

D3542, je ne comprends pas, lol j'ai pas donné d'exemple! mais je prends note de toutes vos réponses.

des images "seamless", en anglais, sans coutures, donc.

elle, ok, je note aussi !

BoB, merci

Pour l'instant c'est en projet sur papier, alors je reviendrai si j'ai d'autres questions , je ne mets pas encore " résolu".

As-tu mis une page nommée index.html ? On dirait bien que non...

Elle, désolé par pu te répondre plutôt. ( je l'ai nommé index-leela ) je mets le lien en bas de ce post.

alors voilà un essai, qui progresse mais j'ai un souci!

j'ai fait un fond que je ne peux pas mettre, j'ai un message ..voir la capture. (le fond qui est gris foncé n'est pas le mien)

Je l'ai fait avec photoshop et il est bien en .jpg. Alors je ne comprends pas qu'il me parle de PX

et autre chose que je voudrais comprendre , j'ai entouré chaque photo avec un carré fin et de couleur gris clair ,

mais je voudrais que la croix qu'ils forment au milieu soit en une seul ligne. Pas en double ligne, je ne sais pas si je m'explique bien!(j'ai regardé avec les cellules, le bord, mais la ligne reste en double)

merci pour votre aide.

Pour le px, c'est parce que les marges n'ont pas leur place dans le body.

L'image de fond se positionne, si nécessaire, avec background-position.

Pour les cellules, il faut utiliser border-collapse:collapse;

Pour les cellules, il faut utiliser border-collapse:collapse;

Oui, j'ai bien mis ce code! mais si je le touche le n'ai plus de trait!

L'image de fond se positionne, si nécessaire, avec background-position.

et bien là je comprends pas non plus. dans mon site, j'ai background-image.

si je mets background-position/ fonctionne pas!

Le background peut se définir en plusieurs parties :

- background-color: #000; (couleur du fond)

- background-image : url('images/monimage.jpg'); (image en fond)

- background-repeat: no-repeat; (image non répétée)

- background-position: top right; (position en haut à droite)

- background-attachment: fixed; (fond d'image fixe)

Par contre, tu peux simplifier en écrivant ceci :

background : #000 url('images/monimage.jpg') no-repeat top right;

Un petit lien sympa.......

Le code gagnerait à être nettoyé : il y a beaucoup de

<div align="center">

inutiles, par exemple, l'alignement pouvant se faire à même les styles. Et la mise en page avec tableau n'est pas idéale non plus, sauf pour les 4 images peut-être...

Une solution parmi d'autres qui demande à être peaufinée ...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>leela-leela-essai</title>
<style type="text/css">
body {
background: url(http://leela.smileys.free.fr/fond-texture.jpg) repeat;
color:#FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
}

#page {
background:#575656;
width:856px;
height:950px;
margin:10px auto;
}

#bandeau {
width:600px;
margin:0px auto;
padding-top:20px;
}

.photo {
width:400px;
height:320px;
float:left;
margin:30px 13px 0px 13px;
border:1px solid #FFF;
}

.photo img {
width:340px;
display:block;
margin:0px auto;
padding-top:20px;
}
</style>
</head>
<body>
<div id="page">
<div id="bandeau">
<img src="http://leela.smileys.free.fr/my-name.titre.jpg" alt="Logo" />
</div>
<div class="photo">
<img src="http://leela.smileys.free.fr/fond.logo.png" alt="" />
<p style="text-align:center;">Photo N°1</p>
</div>
<div class="photo">
<img src="http://leela.smileys.free.fr/fond.logo.png" alt="" />
<p style="text-align:center;">Photo N°2</p>
</div>
<div class="photo">
<img src="http://leela.smileys.free.fr/fond.logo.png" alt="" />
<p style="text-align:center;">Photo N°3</p>
</div>
<div class="photo">
<img src="http://leela.smileys.free.fr/fond.logo.png" alt="" />
<p style="text-align:center;">Photo N°4</p>
</div>
</div>
</body>
</html>

elle, Dreamer, merci

Et bien comme je ne sais pas trop faire, j'ai fait un copier de mon site "leelasmileys" et j'ai modifier quelques "trucs" sachant que c'est un peu vieux comme site.

c'est mon système "D" à moi.

Dreamer , je vais vois avec ce que tu m'as donné et tant remercie. Pas avance.

je vous tiendrai au courant.

Dreamer, ça c'est cool. elle aussi.

Dreamer, j'ai même réussi à rajouter deux images en dessous! c'est au cas ou je voudrais l'agrandir.

faut taper! selenia.graphiste.free.fr (pour voir le site en question)

à toutes et tous.

edit/ je mets résolu, mais si j'ai besoin je reviens ;)

Pas de soucis !!