CODEWITHSUNDEEP
htmlcssimagebackgroundgradient
mkhuete
mkhuete

Reputation: 853

Css Background with a transparent image and a gradient

How can I do it? What I have is these image and these gradiente but i's only showing the gradient and not both.

div {
    background: url(/Icons/icon.png) no-repeat;
    background-image: -moz-linear-gradient(top, #a2a2a2, #878787);
    background-image: -ms-linear-gradient(top, #a2a2a2, #878787);
    background-image: -o-linear-gradient(top, #a2a2a2, #878787);
    background-image: -webkit-linear-gradient(top, #a2a2a2, #878787);
    background-image: linear-gradient(top, #a2a2a2, #878787);
}

Upvotes: 2

Views: 523

Answers (1)

chrisgonzalez
chrisgonzalez

Reputation: 4213

Sounds like you want multiple background images. Logically it may seem like a gradient is a background color, but browsers treat Gradient information like a background image.

Try something like:

div{
    background-image: -moz-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-image: -ms-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-image: -o-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-image: -webkit-linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-image: linear-gradient(top, #a2a2a2, #878787), url(/Icons/icon.png);
    background-repeat: no-repeat, no-repeat;
}

Upvotes: 1

Related Questions