> Tous les forums > Forum des Webmasters
 fond pour un siteSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
leela
  Posté le 10/02/2014 @ 10:06 
Aller en bas de la page 
Astucienne

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.

Publicité
DLUC
 Posté le 10/02/2014 à 13:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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+



Modifié par DLUC le 10/02/2014 13:53
pcastuces
 Posté le 10/02/2014 à 20:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Equipe PC Astuces
Bonjour,

Le sujet a ÚtÚ dÚplacÚ par la modÚration dans le forum des Webmasters qui semble plus adÚquat.

Vous pouvez continuer la discussion Ó la suite de ce message.

A bient¶t.
Dreamer
 Posté le 10/02/2014 à 20:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bonsoir

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

elle
 Posté le 10/02/2014 à 20:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ben pour les dimensions, þa dÚpend de la dimension du site...
Dreamer
 Posté le 10/02/2014 à 20:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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

Mais qui peut le plus .....

y.bli
 Posté le 10/02/2014 à 21:26 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien
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

@+

elle
 Posté le 10/02/2014 à 23:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

Modifié par elle le 10/02/2014 23:02
leela
 Posté le 11/02/2014 à 06:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

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.

elle
 Posté le 11/02/2014 à 07:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

leela
 Posté le 11/02/2014 à 07:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

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 !



Modifié par leela le 11/02/2014 10:12
BOB DE BRETAGNE
 Posté le 11/02/2014 à 12:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonjour leela,

une solution pour une image la rendre raccordable avec GIMP

Exemple avec GIMP > mappage >rendre raccordable

D3542
 Posté le 11/02/2014 à 16:06 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour,

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

elle
 Posté le 11/02/2014 à 16:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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...

leela
 Posté le 11/02/2014 à 16:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

@ 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.



Modifié par leela le 11/02/2014 16:25
D3542
 Posté le 11/02/2014 à 16:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

elle
 Posté le 11/02/2014 à 16:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

D3542

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



Modifié par elle le 11/02/2014 16:50
BOB DE BRETAGNE
 Posté le 11/02/2014 à 18:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

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

leela
 Posté le 12/02/2014 à 07:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

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".



Modifié par leela le 12/02/2014 07:21
elle
 Posté le 18/02/2014 à 16:07 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

leela
 Posté le 27/02/2014 à 16:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

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.



Modifié par leela le 07/03/2014 17:18
elle
 Posté le 27/02/2014 à 17:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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.

elle
 Posté le 27/02/2014 à 17:06 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

leela
 Posté le 28/02/2014 à 09:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

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!



Modifié par leela le 28/02/2014 10:22
Dreamer
 Posté le 28/02/2014 à 18:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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.......

elle
 Posté le 28/02/2014 à 18:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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...

Dreamer
 Posté le 28/02/2014 à 21:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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>

leela
 Posté le 01/03/2014 à 13:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

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.



Modifié par leela le 01/03/2014 13:14
leela
 Posté le 01/03/2014 à 13:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

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

leela
 Posté le 02/03/2014 à 08:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucienne

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 ;)



Modifié par leela le 13/03/2014 18:14
Dreamer
 Posté le 02/03/2014 à 08:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Pas de soucis !!

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Porte-clés de sécurité Resqme à 8,98 €
8,98 € 12,95 € -31%
@Amazon
VTT électrique Eleglide M1 Plus (29 pouces, Shimano 21 vitesses, 100 km, compteur connecté) à 669 €
669 € 999 € -33%
@Geekbuying
SSD Crucial BX500 SATA 1 To à 64,99 €
64,99 € 79,99 € -19%
@Amazon
Graveuse laser SCULPFUN SF-A9 (20W, 400x400 mm + support rotatif + lit laser + caisson ignifuge) à 649 €
649 € 900 € -28%
@Geekbuying
Clavier Logitech K280e à 16,86 €
16,86 € 29,99 € -44%
@Amazon
VTT électrique Touroll B1 (26 pouces, Shimano 7 vitesses, 90 km) à 499 €
499 € 700 € -29%
@Geekbuying

Sujets relatifs
dégradé pour un fond de site
connaisez vous un site pour avoir des fond d'écran
Améliorer un site pour les smartphones, tablettes...
[RECRUTEMENT] Rédacteurs pour site d'actu VR et AR
de l'aides pour créationsun site WEB
Recherche hébergeur pour créer un site web
Nécessité d'un site pour smartphones
C'est quoi un style design pour un site ?
Conseils pour créer un site "vite fait bien fait"
Quel langage pour ce genre de site
Plus de sujets relatifs à fond pour un site
 > Tous les forums > Forum Forum des Webmasters