Multi background dans une page

Version imprimable

05/05/2017, 16h34
hniwatte

Multi background dans une page

comment faire une page html avec deux background: un d'une couleur et l'autre avec une autre couleur
05/05/2017, 19h10
Invité
Bonjour et bienvenu sur DVP,

1/ commence déjà par dire "Bonjour" et "Merci".
C'est le minimum.
- Les règles du club
2/ ensuite, fais une recherche :recherch: "CSS background multiple", tu trouveras des liens.
- Glossaire des propriétés CSS
- FAQ CSS
3/ Si ça ne suffit pas, explique CLAIREMENT :
- ce que tu veux faire / obtenir
- ce que tu as tenté de faire (en montrant ton CODE)
Merci.
06/05/2017, 01h28
hniwatte

multi background dans une page

veuillez m'excuser mais vous me tomber dessus, c'est ma première sur le forum ; certes j'ai posé ma question d'une façon brève mais bon.
je commence à apprendre à coder: je commence avec html et je bute : je veux que ma page ait deux backgrounds de deux couleur différents.
j'ai utilisé les div ça marche mais ce n'est pas ça je veux.
en gros
merci par avance
06/05/2017, 10h02
JefReb

bonjour,
ben montre ton code, comme a écrit Jreaux62
Clic sur #
et met =css ou =html après [CODE=css]

sinon il y a beaucoup d'explications dans les faq et les tuto e la recherche ...

Essaie ca

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html>
    <head>
        <title>Bg mult</title>
        <meta charset= "utf-8">
        <style>
            html{
                width: 100%;
                height: 100%;
                background: linear-gradient(blue 50%, grey 50%) no-repeat;
            }
        </style>
    </head>
    <body>
    </body>
</html>

Je pense qu'il y a un sacré boulot personnel à faire ...
A commencer par suivre les avis de Jreau62 et de lire les tuttoriels et les faq ...
Pour les pages, c'est body qu'il faut paramétrer et non html

ci-dessous un exemple pris dans un tuttoriel ou donné par les nombreux contributeurs de ce forum comme Jreaux62 ou nosmocking entre autre ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .exemple_multi_ar { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); }
Code:

<div class="exemple_multi_ar"></div>

voir codepen: https://codepen.io/JefReb/pen/xdjpvr

19/05/2017, 21h41
a.brice

crée deux <div> de taille 50/50 donc qui divise ton écran en deux et donne à chaque <div> son background tu auras ton compte