Problème d'affichageRésolu/Fermé

Question

Bonsoir à tous, 

Bien voilà j'ai créer mon site sur mon écran de 15.5 Pouces, Le soucis ? 
Lorsque je me rend sur l'écran d'un ordi 17 Pouces c'est la catastrophe ! 
Le fond ne se repette pas mais une couleur se glisse sur la droite, bref ça déforme totalement l'ensemble.  Après courte réflexion j'en suis venu à la conclusion que cela venait donc que le fond n'était pas assez grand =( 

Bien je me tourne donc vers vous .. il y aurait-il une possibilités d'un script qui afficherais un background différent celon la résolution de l'écran .. Possible ?? Ou et bien .. si vous avez une autre solution ..  

Merci de votre aide & bonne soirée.

PS: ça urge un peut

mimigenie · Answer

Salut,

Pas besoin de se casser la tête, se qu'il te faut, c'est un design extensible.

Dans ton css, il faut que tu mettes comme taille à ton image de background 100%
Ou alors que tu mettes qu'elle doit se répétée.

Faire son site pour une seule résolution n'est pas vraiment une bonne idée car dès que tu changes de résolutions, ca ne ressemble à rien.

Ce qui ce fait aussi, c'est faire un site de taille fixe : 800 px
Comme ca tout les écrans peuvent voir le site sans problème, et pour ceux qui ont une plus grande résolution, ils verront l'image de fond sur les bords pour combler le vide qu'il peut y avoir

Robiins · Answer

Bonsoir,

 il faut que tu mettes comme taille à ton image de background 100% 
Tu pourrait me donnait un nom de balise qui défini la " taille " du background ?
Ou je met juste un 

width= "...px";
height="...px";

?
Le soucis c'est que sur mon background ya l'entête de faites sur l'image donc si je le répète ça vas bloquer grave =( 

Merci bien =)

mimigenie · Answer

Tu mets 

width= 100%;

Mais ca va étiré ton image.

Essaye de faire un background sans la bannière de ton site, de préférence une couleur unie ou une image qu'on peut répétée à l'infini sans que se soit moche.

Ensuite mets une zone au dessus de ton site pour ta bannière comme ca la bannière ne dépend pas du background.

Robiins · Answer

Ok .. je vais faire comme ça ^^

J'ai une question, je pense que cela n'existe pas mais .. une balise pour réaliser un dégradé en Css ça n'existerais pas ? car mon background est un dégradé et que je trouve cela " classe " donc simple question .. 

 Merci de ton aides =)

Poivreblanc · Answer

"Le fond ne se repette pas mais une couleur se glisse sur la droite, bref ça déforme totalement l'ensemble. Après courte réflexion j'en suis venu à la conclusion que cela venait donc que le fond n'était pas assez grand =( "  

Tu as tout à fait raison.   

Pour que ça passe sur toutes les résolutions, re-créer ton background (l'image de fond de page) en 1920px de largeur et 1080px de hauteur. ;) 

ensuite dans le css du body, centre le background. Par exemple : 

body{ 
    background:url("fond.jpg") no-repeat center top #fff; 
}

Robiins · Answer

J'y avais penser mais pour els écrans plus petit mon background seras alors couper et donc on ne pourras pas tout voir .. je me trompe ?

Poivreblanc · Answer

Après c'est à toi de le créer de façon à ce qu'il soit ni trop large, ni trop serré.  

Le fait de mettre le fond en 1920*1080, c'est uniquement dans le but d'éviter qu'il soit "coupé net" sur les grandes résolutions, car c'est effectivement loin d'être esthétique.

Robiins · Answer

Daccord .. et bien grand merci =D

mimigenie · Answer

Dégradé en css c'est possible maintenant :)

Mais c'est en css 3 donc seul les navigateurs récents pourront l'afficher correctement.

Voila ce que j'ai trouvé à ce sujet :

https://www.alsacreations.com/tuto/lire/813-css3-background-radial-gradient.html

Sinon tu as la solution Javascript :

http://www.lyxia.org/blog/developpement/javascriptajax/des-degrades-sans-images-avec-javascript-191

Mais il faut qu'il soit activer chez tes visiteurs.

(Je ne garantis pas que ce qui est dit dans les liens soit juste car c'est ce que j'ai trouvé via google ^^ )

Robiins · Answer

probléme résolu, merci pour votre grande aide précieuse et bonne continuation =D

Problème d'affichage

10 réponses

Discussions similaires

Newsletters