Add a Background-Image and CSS3 Gradient

How to Combine a Background Image and CSS3 Gradient on the Same Element

wprocket

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:

GenesisPro728x90

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on tumblr
Tumblr
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.

Want to speed up WordPress site?