[Andrea]

Pierre posted a comment to a www.csstutorial.net tutorial (http://www.csstutori...mment-2151)that is better handled here:

Quote

I have one slight problem though. When I apply the code as per above:

****
body {
background: url(bgimage.jpg) no-repeat #f6f1b9 fixed top right;
padding-right: 250px;
}
****

I only get the image showing. If the image for some reason is unavailable at the time of viewing I would have thought the background fixed colour (#f6f1b9) would show instead. In my case it doesn’t.

On another issue, when viewing this code in IE the image doesn’t show.

The code I ended up applying looks like this:

****
.Button_green-graded
{
line-height: 20pt;
background: url(Button_green-graded.jpg) #33CC00 repeat right fixed top left;
border: 2px;
border-color: #FFFFFF;
font-family: sans-serif;
font-size: 10pt;
color: #000000;
text-align: center;
vertical-align: middle;
}
****
Can anyone see what I’m doing wrong? Thanks

[Andrea]

Pierre - I have pasted your body css and uploaded it here: http://aandbwebdesig...rum/pierre.html - and I see the background color as I should, and the image is showing in IE9.

Then I played around with your Button_green CSS, and there, the background didn't work: http://aandbwebdesig...um/pierre1.html

(I did make the border a bit thicker so it's easier to see and added a border-style)

Looking at your background CSS, you have:

background: url(Button_green-graded.jpg) #33CC00 repeat right fixed top left;

The right and left are a contradiction, which could cause a problem - but by playing around, I got the code to work when I removed 'left' and 'top'. http://aandbwebdesig...um/pierre2.html

I do not know why these 2 properties prevent this from working - anyone?

[Eddie]

You can only have two positions for the background and this code has three:

background: url(Button_green-graded.jpg) #33CC00 repeat right fixed top left;

You can only have top, bottom or center for vertical positioning and left, right and center for horizontal positioning.

The correct order background shorthand values should be:

background: color url repeat position attachment

[Andrea]

Eddie, on 27 July 2011 - 07:54 AM, said:

You can only have two positions for the background and this code has three:

background: url(Button_green-graded.jpg) #33CC00 repeat right fixed top left;

Eddie, I tried with right and top - didn't work, and I tried right and left - didn't work. The only option I got to work was with neither left nor top. Could it be that fixed counts as one of the 2?

[Eddie]

Just remove 'fixed' to allow the control of image positioning.