Jump to content
Stef's Coding Community
Sign in to follow this  
Andrea

Background Issue

Recommended Posts

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 icon_smile.gif

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...