Add a Background-Image and CSS3 Gradient

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:

#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.

You will love the following tutorials:


Editorial Staff

Editorial Staff

Editorial Staff is an in-house team of native WordPress developer and industry columnists lead by Anwer Ashif. Join the community of 2,77,752 users.

Leave a Reply

Your email address will not be published. Required fields are marked *