How to add CSS3 gradient background and background image

This article was written by in August 9, 2014, & may not be posted on other sites!
Original source url for this article: How to add CSS3 gradient background and background image

How to add CSS3 gradient background and background image.
Is it possible to add a CSS gradient background and background image at the same time? YES!
This is how to, full CSS3:

 

How to add CSS3 gradient background and background image

Add CSS3 gradient background and background image:

Make sure to replace the background image path with your custom image.

#id{
background-color: #94baf2;
/* Old browsers */
background-image: url("images/my-img.jpg"), -moz-linear-gradient(top, rgba(148,186,242,1) 0%, rgba(62,144,244,1) 100%);
/* FF3.6+ */
background-image: url("images/my-img.jpg"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(148,186,242,1)), color-stop(100%,rgba(62,144,244,1)));
/* Chrome,Safari4+ */
background-image: url("images/my-img.jpg"), -webkit-linear-gradient(top, rgba(148,186,242,1) 0%,rgba(62,144,244,1) 100%);
/* Chrome10+,Safari5.1+ */
background-image: url("images/my-img.jpg"), -o-linear-gradient(top, rgba(148,186,242,1) 0%,rgba(62,144,244,1) 100%);
/* Opera 11.10+ */
background-image: url("images/my-img.jpg"),  -ms-linear-gradient(top, rgba(148,186,242,1) 0%,rgba(62,144,244,1) 100%);
/* IE10+ */
background-image: url("images/my-img.jpg"), linear-gradient(to bottom, rgba(148,186,242,1) 0%,rgba(62,144,244,1) 100%);
/* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e90f4', endColorstr='#94baf2',GradientType=0 ); IE6-9 */
filter: none; /*IE6-9 */
}

 

Add css properties background position or background repeat

Having a CSS3 gradient background and background image, you can also add no-repeat / repeat-x or background position. Put the code right after the image path, something like this:
#id{
background: url('images/my-img.jpg') center center no-repeat, linear-gradient(top, #startColor, #endColor);
}

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

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