Jump to content


Photo

Background Issue


  • Please log in to reply
4 replies to this topic

#1 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,673 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 27 July 2011 - 05:30 AM

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 Posted Image


  • 0

#2 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,673 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 27 July 2011 - 06:05 AM

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?
  • 0

#3 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,585 posts
  • LocationTexas

Posted 27 July 2011 - 07:54 AM

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
  • 0

#4 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,673 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 27 July 2011 - 08:39 AM

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?
  • 0

#5 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,585 posts
  • LocationTexas

Posted 27 July 2011 - 08:57 AM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users