HTML background two colors [duplicate]
Asked Answered
K

1

5

I use this code to make the background blue:

<!DOCTYPE html>
<html>
<body style="background-color:blue;">
</body>
</html>

Which works good but how can I make the background have two different colors? 50% to be blue and the rest 50% to be yellow for example, split horizontally...

Killingsworth answered 12/4, 2017 at 15:52 Comment(2)
Please take a look to css3factory.com/linear-gradientsHortensehortensia
Find the answer in making two background color in css Ckick HereCaesium
W
10

Use a css gradient: https://css-tricks.com/css3-gradients/

background: linear-gradient(blue, yellow);

Or if you want don't want the gradual fade you have to set the position:

background: linear-gradient(to right, blue 0%, blue 50%, yellow 50%, yellow 100%);
Wertz answered 12/4, 2017 at 15:54 Comment(1)
If anyone wants a vertical split which I found little tricky. I got this resolved ==> .container { background: linear-gradient( to bottom, white 0%, white 25%, blue 25%, blue 100% ); } ==> html use class='container' and put your content within it and it will automatically show 25/75 vertical split :)Encumbrance

© 2022 - 2024 — McMap. All rights reserved.