I'm creating an HTML page with CSS, and I'd like to know how to put two backgrounds on the same HTML page via CSS. I have this image:
I want to put this image in the top, but its height is not enough to cover the entire page, so I want to put a linear-gradient (to bottom, # 000, # CCC) from where that image ends , to give a legal effect, but I can not do that.
If you do not have compatibility restrictions between browsers, with CSS3 this would be possible, since it accepts multiple backgrounds in a single element:
body{
background-image: url(imagem1.png), url(imagem2.png), url(imagem3.png);
}
Remembering that this functionality also works with gradients in CSS3:
body{
background-image: linear-gradient(rgba(255,0,0,0.1),rgba(0,255,0,0.1)),
linear-gradient(rgba(255,255,0,0.1), rgba(0,255,255,0.1));
}
According to CanIUse , the main browsers compatibility for this feature is:
Opera , Firefox , Opera , Safari (iOS) 3.2+ , Android 2.1+This site's solution is great for doing what you need:
$.vegas('slideshow', {
delay:15000,
backgrounds:[
{ src:'images/2.jpg', fade:1000 },
{ src:'images/6.jpg', fade:1000 }
]
})('overlay');