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:

• How to Add Nofollow Tag to a Certain Domain
• How to Add Visitor Counter to Website in PHP
• How to Popup Genesis eNews Extended Opt-in Form
• How to Add Custom Logo to Genesis Child Theme
• 11 Genesis Framework Hacks for Beginner
• How to Use HTML Form [PHP]
• Starting with WordPress Metafields
• How to Store XML Data to PHP Variable
• How to Create Awesome Input Range Slider
• How to Make HTML Form Work and Send Mail