CSS several backgrounds

Asked

Viewed 369 times

2

I have this code, and I don’t understand why it doesn’t work, what I wanted was to have two backgrounds one in the top center another bottom center. but it only works at the bottom and it’s not supposed to be at the bottom. Any suggestions? Thanks

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: url('../imgs/aboutUsBg1.jpg') center top no-repeat, 
                  url('../imgs/aboutUsBg2.jpg') center bottom no-repeat;
  height: 100%;
  width: 100%;
}

You can see the page here if you want to take a look: http://www.iwanttobesanta.com/about_us.html

css background multiple

  • I believe that it is not possible to do this, I think it is better you put the two images together and make them one...

  • Okay Obgado I’ll do it

  • it is possible, yes.. but even so, I still think it is better to join in an image.

1 answer

3


Here’s an example that works: http://jsfiddle.net/dke7L/

  • Remember to make the Ivs that come inside body transparent.
    Anything that comes in the body of the page will appear above the body background.
    I took a look at your page and a <div id="missValBar"> has the white background, which is getting over the background.

  • your body has this CSS-inline: background-position: 50% 1143.2px, 50%;, he’s messing with the bottom of the page. Remove it.

  • Obgado but as you can see in the other pags that have only a background image but with repeat-y results

Browser other questions tagged css background multiple

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