[RESOLU] css et fond de site

[guicote]

bjr,

 

j ai fait des recherches mais rien ne fonctionne correctement... donc

 

comment mettre une image de fond fixe sur mon site www.golfspeed.fr au lieu du bg_pattern présent ?

 

j arrive à mettre une autre image mais au milieu de l'ecran lorsque l'on descends sur le site, on arrive en fin de fond, et ce n est pas beau.

 

css d'origine du template :

 

/* —————————————————————————————— layout —————————————————————————————— */

#wrapper1 {min-width:1100px;min-height:100%;padding:36px 0 82px 0;background:url(../img/bg_pattern.jpg);}

#wrapper2 {height:100%;}

#wrapper3 {width:1024px;margin:0 auto;padding:0 31px;background:#fff;border:4px solid #ebebeb;text-align:left;}

 

#columns {width:1024px;float:left;margin:13px 0 0 0;padding:30px 0 0 0;border-top:3px solid #ebebeb;}

body#index #columns {padding:0;border:none;}

 

#center_column {width:763px;float:left;margin:0 0 20px 0;}

body#index #center_column {width:1024px;margin:0 0 11px 0;}

 

#right_column {width:241px;float:left;margin:0 0 0 20px;}

 

quelle doit être la dimension de l'image de fond et comment la rendre fixe pour qu'elle occupe tjrs tout l'ecran ?? merci

 

ps j ai fait des modifs du style :

 

 

{min-width:991px;min-height:100%;background: url(../img/nouvelleimage.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;}

 

mais cela ne marche pas... elle y est mais limitée et non fixe

Edited September 1, 2012 by guicote (see edit history)

[phil3001]

Bonsoir,

 

Si vous désirez avoir un fond fixe, il vous suffit dans votre css de rajouter :

 

background-attachment: fixed

 

votre fond ne bougera plus

 

En espérant vous avoir aidé

[franckm1000]

qu'elle occupe tjrs tout l'ecran

 

Une image de fond est de dimension fixe (par exemple 1000x1000) mais un écran peut être de multiple taille donc ===> une image ne peut pas toujours remplir un écran puisqu'elle sera dépendante de l'écran.

Si votre écran fait 800x600 et que votre image fait 800x600 elle prendra tout l'écran mais si mon écran fait 1600x1200 elle n'en prendra que la moitié...

 

ET C'EST NORMAL ! L'image de fond doit être construite pour pouvoir se fondre avec la couleur de fond ou alors doit être répétée (mais ce n'est pas jloi en cas de grande photo).

Il existe des javascripts permettant de redimensionner l'image à la taille de l'écran mais ce n'est à mon sens pas une bonne idée car ça risque plutôt de déformer l'image qu'autre chose.

 

background-attachment: fixed

Il a déjà mis fixed mais en fait il fait son fond sur wrapper1 alors qu'il devrait le faire sur body

 

Si vous voulez une image de fond pour votre site, après essai avec firebug, votre image devrait se trouver plutôt sur body.

 

En gros, dans #wrapper1 enlevez:

background:url(../img/bg_pattern.jpg)

 

Et dans body rajoutez:

background:url(mon_image.jpg) no-repeat fixed;

Edited August 31, 2012 by franckm1000 (see edit history)

[guicote]

merci..; j arrive bien a supprimer le fond du wrapper 1 mais ou et comment rajouter :

 

 

background:url(mon_image.jpg) no-repeat fixed;

 

 

je ne suis pas un expert en css comme vous l'aurez constaté et je ne sais pas ou mettre ce code dans le css ?

est ce dans la partie layout que j ai copier/coller ci dessus ? ou est ce "dans body" ?

 

merci

[franckm1000]

Dans:

body{
color:#888888;
font:12px "Arial",Arial,Helvetica,sans-serif;
}

 

Transformer en:

body{
color:#888888;
font:12px "Arial",Arial,Helvetica,sans-serif;
background:url(http://monimage.jpg) no-repeat fixed;
}

 

Je ne peux pas voir dans quel fichier c'est car le cache est activé mais certainement global.css dans themes/montheme/css

[guicote]

c 'est parfait, un grand merci...

 

suppression de l'image dans wrapper 1 + background:url(http://monimage.jpg) no-repeat fixed; dans le body et tt est ok...

[langelin]

UP,

 

bonjour et bonne année à tous!

 

Je remonte ce sujet car j'ai créé un fond (background) et placé l'image dans le dossier "img". j'ai indiqué comme ci-dessus les paramètres pour que smarty le place (avec des indications pour différents navigateurs fournies par Muche que je remercie encore).

 

Mais l'image, bien que centrée et correcte en largeur dans le body, est légèrement coupée au-dessus (environ 40px) et il manque le bas (environ 100px).

 

Muche proposai de placer une image de format 2000px X 1300px, ce que j'ai réalisé. J'ai ensuite tenté de la diminuer à 1300px X 900px mais alors : elle est placé plutôt à gauche laissant voir une verticale blanche à droite et la hauteur n'est pas visiblement corrigée... j'ai donc repris l'image de départ!

 

=> si je garde cette ligne :

	 background: url(../img/background-site.jpg) no-repeat center fixed;

en ôtant "center", je récupère la partie haute mais n'arrive pas à faire de même pour le bas de l'image

 

Ai-je loupé quelque chose que je ne comprend pas?

 

Sachant que j'ai déjà créé un fond sur un autre site (version 1.4) en procédant de même sans avoir cette anomalie, que j'ai sur la version 1.5.4 maintenant...

 

Merci d'avance pour vos idées.

Cordialement.

Edited January 17, 2014 by langelin (see edit history)