WEBACAPELLA- Background bonne taille....

Fermé
MatmaxOfficiel Messages postés 656 Date d'inscription mardi 16 février 2010 Statut Membre Dernière intervention 29 juin 2014 - 26 janv. 2014 à 19:02
MatmaxOfficiel Messages postés 656 Date d'inscription mardi 16 février 2010 Statut Membre Dernière intervention 29 juin 2014 - 29 janv. 2014 à 13:52
Bonsoir les webmasters et tout ce qui l'en suit ! Donc voilà mon problème c'est que je cherche à mettre mon background à la bonne taille pour qu'il s'affiche pleinement sur tout l'espace de mon site mais je n'arrive pas à régler se problème enfin je cherche à modifier l'image mais c'est soit trop long ou trop large ou trop petit. Voilà, j'utilise Webacapella 4 !

http://www.matmaxevenement.com/

Merci d'avance pour votre aide, cordialement MatmaxOfficiel !
A voir également:

5 réponses

ReDLoG Messages postés 243 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 28 octobre 2021 57
26 janv. 2014 à 21:29
Bonsoir,

Avec le type d'image que tu utilises, tu ne pourras pas faire qu'elle soit extensible sur toute la largeur d'un écran supérieur à 800 pixels de résolution, et pour cause l'image fait 1280px de hauteur par 800px de largeur :
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url('black_texture_escala_gris.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #2c2c2c;
}

Il faut utiliser une image "extensible" ou bien utiliser une image différente pour tous types de résolutions supérieures à 800 pixels ce qui devient vite ingérable même en faisant une détection par javascript ou autre...
D'autre part, même si ça ne va pas résoudre immédiatement ton problème de background, tu peux alléger le code CSS du body comme suit (ce n'est pas de ta faute, c'est le comportement de Webacappella!) :
body {
margin: 0;
background: #2c2c2c url('black_texture_escala_gris.jpg') no-repeat fixed;
}

P.S. : Webacappella produit un style CSS lourd et répétitif comme par exemple :
<div id='is-global-layer' class='wa-main-page-contenair' style='position:relative;z-index:200;top:0px;width:1000px;;text-align:left;margin:0 auto;'>
Voilà ce que j'ai pu tirer de ton code source pour t'aider dans ton problème...
0
MatmaxOfficiel Messages postés 656 Date d'inscription mardi 16 février 2010 Statut Membre Dernière intervention 29 juin 2014 56
26 janv. 2014 à 21:43
Une image extensible c'est une lamelle de hauteur infini à 300 px que tu mettrais à répétitif de gauche à droite ou de droite à gauche pour voir un fond unis c'est ça?
0
ReDLoG Messages postés 243 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 28 octobre 2021 57
26 janv. 2014 à 22:17
C'est tout-à-fait ça, tu as bien compris!
Il faudra penser à modifier le code CSS du body qui devrait ressembler à ceci :
body {
margin: 0;
background: #2c2c2c url('texture.jpg') repeat top left;
}
Sachant que si on ignore le "top left", ça sera le comportement par défaut!
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
27 janv. 2014 à 06:11
Salut

Sinon il y a background-size:cover (avec un commentaire conditionnel pour IE8 et moins) si on veux vraiment une image non répétée.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
MatmaxOfficiel Messages postés 656 Date d'inscription mardi 16 février 2010 Statut Membre Dernière intervention 29 juin 2014 56
29 janv. 2014 à 13:52
Merci les gens ! Pour votre aide ! J'ai vite fait et j'en ai trouver un moin jolie mais qui fait l'affaire ! http://www.matmaxevenement.com/
0