1
How to Combine a Background Image and CSS3 Gradient on the Same Element
Combine a background image and CSS3 gradient on the same element. I have looked for an excellent way to add an SVG Image and CSS3 Gradient on the hero section of our RainaStudio. So, I figure out the form and here today sharing with you the code snippet. You can easily add the CSS to your element. To see live, you should inspect the item on your browser and implement the CSS to see the changes.
Here is the code snippet:
|
1 2 3 4 5 6 7 8 9 |
#hero-img { background: #3B5998; background: -moz-linear-gradient(to right, #3b5a9b 0%,#5387f4 100%); background: -webkit-linear-gradient(to right, #3b5a9b 0%,#5387f4 100%); background: url(svg/pattern-right.svg), linear-gradient(to right, #3b5a9b 0%,#5387f4 100%); background-position: left center,center center; background-repeat: no-repeat,no-repeat; background-size: 675px 600px, cover; } |
If you have face any problem to implement the CSS, leave a reply; we follow up for solution.
