How to put two backgrounds on the same page?

Asked

Viewed 6,149 times

5

I am creating an HTML page with CSS, and would like to know how to put two backgrounds in the same HTML page via CSS. I have this image:

inserir a descrição da imagem aqui

I want to put this image on top, only it’s not high enough to cover the whole page, so I want to put a linear-gradient(to bottom, #000,#CCC) from where this image ends, to give it a nice effect, but I can’t do it.

css
  • 2

    Can you please specify what kind of background plans?

  • Where , no body?

  • Yes on the body, I want to put an image on top, Dae below that a linear-gradient image...I tried to put but it did not work very well

2 answers

8


If you have no browser compatibility restriction, 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 the website Caniuse, the compatibility of the major browsers for this feature is:

IE9+ (does not support gradients), Chrome, Firefox, Opera, Safari (iOS) 3.2+, Android 2.1+

  • How do I set the position of each background? Why are they getting over each other....

  • background-position:x(px) y(px), x(px) y(px), example: background-position:100px 200px, 200px 300px

  • vlw Ka, it worked here!

1

The solution of this site is great to do what you need:

http://vegas.jaysalvat.com/

$.vegas('slideshow', {
  delay:15000,
  backgrounds:[
    { src:'images/2.jpg', fade:1000 },
    { src:'images/6.jpg', fade:1000 }
  ]
})('overlay');

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.