Se connecter avec
S'enregistrer | Connectez-vous

Background dégradé horizontalement; orange-blanc-orange

Dernière réponse : dans Programmation

Bonjour, oui, ENCORE moi. >_<

Bon désolé d'encore venir pour harceler lol, mais j'ai un soucis, ou plutôt une question; voilà je voudrais faire un arrière plan dégradé comme beaucoup de monde, et j'ai plus ou moins réussi.

En fait, j'ai pas mal cherché sur google et je sais maintenant faire un dégradé verticale qui va d'une couleur à une autre puis garde la seconde couleur à l'infini (si j'ai bien compris), donc en gros: Rouge - Blanc, puis reste blanc.

Moi ce que j'aimerais faire c'est un dégradé horizontal. Pour en faire un comme au dessus c'est facile il suffit de changer le "repeat-x" par "repeat-y", mais moi j'aimerai qu'après être passé a la seconde couleur, ça repasse à la première couleur tout en dégradé (on va dire "mode miroir", je pense que ça image bien xD).

Donc comme inscrit dans le titre, que ça passe de Orange vers Blanc, puis revienne vers le Orange.
Je saurais faire ça avec un logiciel mais du coup, c'est surtout en ce qui concerne la résolution des écrans des internautes qui visiteraient mon site qui me gène, suivant leur résolution, l'image serait trop grand ou trop petite.

Voici mon code:
  1. background-image:url(<a href="http://monsite.free.fr/background.gif" target="_blank">http://monsite.free.fr/background.gif</a>);
    

  2. 	background-repeat:repeat-y;
    

  3. 	background-position: top left;
    

  4. 	background-color: #FF0000;
    

  5. 	margin: 0;
    

  6. 	padding: 0;


Donc là, mon image dégradée démarre du côté gauche, j'aurais voulu savoir si je pouvais insérer une seconde image de fond qui démarrerait, elle, du côté droit?

Et aussi j'aurais voulu vous demander si on pouvait "incruster" la balise <container> (donc en gros mon site) dans la page, c'est à dire que l'image de fond ne pourrait pas passer derrière la balise, et donc serait "compressée" entre le bord de l'écran et la balise <container>, de ce fait, qu'importe la résolution, le background serait affiché correctement. (c'est une supposition, je ne sais pas si c'est possible)

Vous voyez ce que je veux dire? (C'est dur d'expliquer ce genre de choses T_T)

EDIT: Ou peut-être plus simple je sais pas, une règle CSS qui force l'image à se coller aux deux extrémités de l'écran (donc à s'étirer ou à rétrécir suivant la résolution de l'écran). C'est possible?

Merci d'avance

Autres pages sur : background degrade horizontalement orange blanc orange

Lassé par la pub ? Créez un compte
Expert Programmation

Moi, j'en sais foutre rien, mais je la ramène quand même ! :o 
( :pfff:  )

T'as pas moyen de faire un premier div qui prenne 50% en largeur, aligné à gauche, pis un autre qui prenne les 50 autre %, mais aligné à droite ?

Voilà, je suis arrivé à quelque chose qui me convient. Je pense que les autres résolutions n'auront pas vraiment de problèmes.

Merci de ta réponse, oui j'avais pensé à faire deux balises, j'ai essayé mais étant novice, je suis juste arrivé à faire deux balises toutes petites de chaque côtés et impossible d'y insérer mon fond. ^^'

Finalement voilà comment j'ai procédé:

-Sous un logiciel de dessin, j'ai créé une image de 2000px de largeur, et 4px de hauteur.

-Ensuite j'ai fait mon dégradé d'un côté, j'ai sélectionné le dégradé, copié, inversé l'image pour que mon dégradé soit de l'autre côté, puis recollé le dégradé précédemment copié pour qu'il soit des deux côtés (c'est un peu le bordel à expliquer xD).

-Sauvegardé en background.gif.

-J'ai modifié le CSS du body (je sais pas si on dit vraiment comme ça mais vous me comprendrez) en ajoutant ces lignes:
  1. background-image:url(<a href="http://monsite.free.fr/background.gif" target="_blank">http://monsite.free.fr/background.gif</a>);
    

  2.     background-repeat:repeat-y;
    

  3.     background-position: top;
    

  4.     margin: 0;
    

  5.     padding: 0;


Voilà je pense que c'est tout.
J'ai fait une image de 2000px de largeur car je pense (je pense xD) que de ce fait, les gens qui ont une grosse résolution auront moins de chance d'avoir un problème d'affichage et de se retrouver avec un blanc sur le côté au lieu du orange.

Merci.

A bientôt. :bounce: 
Expert Programmation

Spa grave, y a la navigation privée sur IE maintenant. Ca justifie toutes les autres carences, une telle avance technologique sur la concurrence :o 

[:marsien] Et en plus, ils osent s'en vanter à la TV... M'enfin c'est pas pire que Apple qui a inventer le copier/coller en 2009... Décidément, qu'est-ce qu'on est bien sur la banquise :) 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet