Is it possible to have two background colors for a single html element? [duplicate]

by

Simply use linear-gradient as background and you can easily adjust the direction, colors, % of each color:

body {
  margin: 0;
  background: linear-gradient(to right, red 50%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}
some content
body {
  margin: 0;
  background: linear-gradient(to bottom, red 60%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}
some content

Or with pseudo-element and simple background-color then simply control the position/size of pseudo-element to control both background:

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: blue;
  z-index:-1;
}
some content
body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 40%;
  left: 0;
  right: 0;
  background: blue;
  z-index:-1;
}
some content

If you want more

You can combine different color inside gradient and also use multiple linear-background in order to achieve more complex color division for your background:

body {
  margin: 0;
  background:linear-gradient(30deg, red 50%, blue 50%, blue 70%,orange 70%) left/50% 100% no-repeat,              
              linear-gradient(-30deg, red 50%, blue 50%, blue 70%,orange 70%) right/50% 100% no-repeat;
  
  height:100vh;
  text-align:center;
  color:#fff;
}
some content

You can also do the same with pseudo element and also use some CSS transform (rotation, skew, etc):

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: 50%;
  background: blue;
  transform: skew(30deg);
  z-index: -1;
}

body:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: -50%;
  background: orange;
  transform: skew(-30deg);
  z-index: -1;
}
some content

More Related Contents:

  1. Color of stacked semi-transparent boxes depends on order?
  2. Can I set an opacity only to the background image of a div?
  3. Change select box option background color
  4. Why does styling the background of the body element affect the entire screen?
  5. Why the content is not covered by the background of an overlapping element?
  6. Fixed background image with ios7
  7. CSS ”background-color” attribute not working on checkbox inside
  8. How to make an element’s background-color a little darker using CSS
  9. Stretch background image css?
  10. Is there a way to use use text as the background with CSS?
  11. CSS Background image not loading
  12. Fit website background image to screen size
  13. How to create a Slanted Background with CSS? [duplicate]
  14. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  15. How to center a (background) image within a div?
  16. Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
  17. Fallback background-image if default doesn’t exist
  18. How to add a background image on top of a previous background image?
  19. Dynamic component size on page
  20. HTML, CSS: Extra space in the body
  21. Flexbox: center horizontally and vertically
  22. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  23. Should I specify height and width attributes for my IMGs in HTML?
  24. Preventing double borders in CSS Grid
  25. Image scaling causes poor quality in firefox/internet explorer but not chrome
  26. My Footer Floats
  27. Multiple background images in one div
  28. Block Level Elements inside Inline elements [duplicate]
  29. CSS 100% height with absolute positioning top 0 bottom 0
  30. CSS column breaks?

Leave a Comment