28172 sujets

CSS et mise en forme, CSS3

Background: plusieurs colonnes avec couleur de fond différent

Bonjour

Mon site a une largeur fixed à 1000px centré dans la fenêtre.

J'ai trouvé comment mettre un background au body en utilisant deux colonnes:

        background:linear-gradient( 180deg,#6C7732 0% ,#394217 90%) no-repeat 0 50%,
	linear-gradient(180deg,#6D7F3D 20%,#3C4D22 90%) no-repeat 100% 0;
	background-size: 30% 100%, 70% 100%;
}


Je voudrai donc avoir la même colonne à droite du site
et donc que celle du mileu ( dans le code ci-dessus; celle à 70%) correspondent à la largeur du site?

Merci d'avance
Cordialement
Modifié par cpalo (26 Nov 2013 - 06:47)
Bonjour,

Cela me donne bien les trois colonnes.
Mais celle du milieu j'aurai souhaité qu'elle fasse 1000px.

Est-ce qu'il est possible d'appliquer une classe au body?

.3colonnes {
    background:
   	linear-gradient(180deg,#6D7F3D 0,#3C4D22 90%) no-repeat 50%,
        linear-gradient(180deg,#6C7732 ,#394217);
	background-size: 40% 100%, 100% 100%;
}


 <body class="3colonnes">

Mais cela ne fonctionne pas.

Cordialement
Modifié par cpalo (26 Nov 2013 - 10:01)
Un petit bug...

Le background multiple s'applique bien à l'ensemble de la fenêtre.
Mais si on fait défiler l'ascenceur vertical pour faire apparaître ce qui n'était pas visible, il n'y a pas de fond d'appliqué sur cette partie qui n'était pas visible.

Et si tu regardes sur ton résultat que tu as mis en ligne, ce bug est reproduit:
fond vert ou fond blanc suivant le code
Modifié par cpalo (26 Nov 2013 - 07:04)
Modérateur
Bonjour,

pour éviter cela, dans ce cas le plus simple est de fixer le fond:


  background-attachment: fixed;


Ansi le fond restera fixe.
Merci pour cette réponse rapide.
Et si je puis me permettre encore.;et pour la largeur du background du milieu pour l'adapter à la largeur de 1000px?
cpalo a écrit :
Merci pour cette réponse rapide.
Et si je puis me permettre encore.;et pour la largeur du background du milieu pour l'adapter à la largeur de 1000px?

De rien Smiley smile , ça se passe via background-size , idem, éventuellement pour le fond trop court : http://codepen.io/gc-nomade/pen/lyJka
++
Bonjour

Exactement ce que je voulais..
Du coup avec les lectures complémentaires sur le web j'ai bien progressé sur les backgrounds multiples, très pratique pour quelqu'un comme moi qui ne suis pas graphiste et qui n'utilisais pas photoshop pour faire des backgrounds.

Par contre dans ton dernier code:
background-size: 1000px 1000%, 1000% 1000%;

au lieu de :
background-attachment: fixed;

a un effet sur le dégradé qui se fait sur une hauteur 10 fois plus haute, donc à peine visible
J'ai fait la comparaison en remettant 100% où là j'ai le dégradé recherché.

De même j'avais écrit:linear-gradient(180deg
mais l'utilisation de 180deg c'est pour indiquer un dégradé en diagonale, donc 180deg c'est vertical donc inutile. C'est ça?

Cordialement
cpalo a écrit :
Bonjour

De même j'avais écrit:linear-gradient(180deg
mais l'utilisation de 180deg c'est pour indiquer un dégradé en diagonale, donc 180deg c'est vertical donc inutile. C'est ça?

Cordialement

0 et 180deg sont pour du vertical et se dessinent dans des sens inverse, tu peut utiliser la syntaxe to bottom ou to top si cela te semble plus compréhensible.

exact, pour le background-size il étire d'autant l'image, le background-attachement est plus adapté si tu tiens a conservé le dégradé complet a l’écran.

Bonne continuation,
++
GC
Je crois que je vais conserver le 0 et 180deg.; ainsi lorsque je voudrai utiliser un dégradé en diagonale je n'aurai qu'à modifie rce chiffre.

Pour le backgroud-size je vais éviter le 1000% . Mais par contre si on doit faire défiler plusieurs fenêtres en hauteur ( pour des pages un peu longues) , alors autre problème car le background se répete.
Il va donc falloir que je trouve une sorte de "consensus" entre les deux.

Bonne soirée
Sujet clos
Aller à