given a div that is 500px wide, is there a way to fill the background with 2 different colors using css? I know it can be done with a background image, but just wondering if it can be done with bg color. eg :
To use more than 2 colors (because why not), put the powerful rgba() to use and use 2 gradient parameters. Here's an example with the background property holding an image and masking some portion of the image with a gradient of orange and transparent.
CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
You can't set multiple background colors, but you could set something like:
div.twocolorish { background-color: green; border-left: 20px solid red; }
As long as you don't need text to go over the part in red then this would take care of you in one div.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With