css right left image issue

Having an issue creating images. Would like one on right and one on left, ( over the main background image ) however, no matter what I place in, only shows on right, left but never both?

I know I'm doing something wrong, just not sure what it is.

Wordpress css

Code:

---

body {       
        color:#cdc9c9;
        font-size:12px;
        font-family: 'arial';
        position:relative;
        background:url("images/back-body.jpg") top no-repeat;
          background: url("images/bg-left.png") no-repeat;
          background: url("images/bg-right.png") top right no-repeat;
         
       


        text-shadow:1px 1px 1px #202020;
}

---

floating would also be great/ if possible so it moves with page when scrolled.

Thanks in advance.....

Please post a link to the page on your site that contains the problematic script so we can check it out.

It will make getting help a lot easier/faster

RE:

[QUOTE=ajfmrf;295663]

Please post a link to the page on your site that contains the problematic script so we can check it out.

Sorry, I never know if they are allowed or not:

kentuckyweedradio.com

It looks like the syntax is incorrect - multiple background values should just be comma-separated.

Code:

---

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

---

See http://www.css3.info/preview/multiple-backgrounds/

So would this be correct then?

Code:

---

body {       
        color:#cdc9c9;
        font-size:12px;
        font-family: 'arial';
        position:relative;
        background:url("images/back-body.jpg") top  no-repeat,
          background: url("images/bg-left.png") top left no-repeat,
          background: url("images/bg-right.png") top right no-repeat;

        text-shadow:1px 1px 1px #202020;
}

---

The above code , dose not show, right or left image?

Quote:

---

Originally Posted by buxmike

So would this be correct then?

Code:

---

body {       
        color:#cdc9c9;
        font-size:12px;
        font-family: 'arial';
        position:relative;
        background:url("images/back-body.jpg") top  no-repeat,
          background: url("images/bg-left.png") top left no-repeat,
          background: url("images/bg-right.png") top right no-repeat;

        text-shadow:1px 1px 1px #202020;
}

---

---

No that's still not the correct syntax. Look carefully at the sample code I posted (from the linked resource) and you'll see that there is only one background property with multiple, comma-separated values listed after it. Here's that sample code again for reference;

Code:

---

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

---

worked! Thank you.

If I may ask, where can I add float to keep inframe.

Meaning when someone scrolls down the site, the two images

right / left don't move.

Thank you.

You just need to add the background-attachment value of "fixed" into your CSS shorthand. See here for reference: http://www.dustindiaz.com/css-shorthand/