CSS Technique for Dividing a Background into Two Colors

To add HTML, use the code below as an example:

Avatar woman

Jane Flex

Some text.

Avatar man

John Doe

Some text here too.

If you want the content to be centered both horizontally and vertically, follow step 2:
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
/* If necessary, style the image inside the centered container */

.logindiv {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, #1F4E79 0%, #1F4E79 50%, #ddd 50%, #ddd 100%);

double color background css
background: linear-gradient(, color1 color1-stop-at, color2 color2-start-at);

Frequently Asked Questions

Posted in Css