CSS Multiple Background Positioning

Question

I am currently working with the following code:

  body {
    background: url("image1") repeat fixed center top #000000;
    border: 0 none;
    color: #DBDBDB;
    font-family: Verdana;
    font-size: 9px;
    font-weight: normal;
    text-decoration: none;
  }

  inlineContent {
    background: url("image2") no-repeat scroll center top transparent !important;
    display: inline-block !important;
    height: 425px !important;
    left: -282px !important;
    margin: auto !important;
    position: absolute;
    right: 0 !important;
    top: -425px !important;
    width: 900px !important;
    z-index: -1 !important;
  }

Where I have a general background (first line after body), and I have another image ontop of the background (lines after inlineContent). How would I be able to add another image, also ontop of the original background, with a different position than the the previous two images?

Thank you in advance!

score 0 · Answer 1 · edited May 23 '17 at 11:56

You can use this way

inlineContent{
    background: url("image2") no-repeat scroll center top transparent !important, url("image3") no-repeat scroll right top transparent !important,;
    display: inline-block !important;
    height: 425px !important;
    left: -282px !important;
    margin: auto !important;
    position: absolute;
    right: 0 !important;
    top: -425px !important;
    width: 900px !important;
    z-index: -1 !important;
}

Your question is also answered here: Can I have multiple background images using CSS?

Here is a great tutorial how it works: http://www.css3.info/preview/multiple-backgrounds/

Hm, but with that method, the specified position applies to both images. How can I have the two images to have separate, different positions? — user1846225, Nov 22 '12 at 23:25

score 0 · Answer 2 · answered Dec 10 '12 at 09:39

Have you tried to use pseudo-elements :before and :after ?

For example:

inlineContent:before {
    content: "";
    position: ;
    top: ;
    left: ;
    z-index: ;
    display: inline-block;
    margin: ;
    width: ;
    height: ;
    background: url("image3") no-repeat scroll center top transparent;
}

There are many good articles out there. You could check an article from css-tricks.com there he describes all the cool stuff you can achieve with them.

But more important question is why are you using everywhere !important?

CSS Multiple Background Positioning

2 Answers2