Background Issue

[Andrea]

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

 

 

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?

[newseed]

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]

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?

[newseed]

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