Background images not displaying

helen · Post by **helen** » Wed Jul 02, 2008 7:40 am

I'm trying to add a faint image as a background to anchor bottom right to my CHM window. I'm putting it in the <body> on my stylesheet, but it's not showing up in the preview. I have tried numerous other images in my project and every single one shows up just fine, except the one I want! It is the right size, but no matter what format I try, it just won't show up. Is there some kind of restriction I'm missing? It must be something to do with my image I think, but I have no idea what! I am confused.

helen · Post by **helen** » Wed Jul 02, 2008 7:56 am

Solved it!

Erm - how can I get it to anchor to the bottom right of my skin window though? Not solved that yet.

KevinDAmery · Post by **KevinDAmery** » Wed Jul 02, 2008 7:59 am

Only way I can think to get bottom right would be to put it in a table. You may also be able to get somewhere with the Float attribute, but I'm not sure how well CHM uses that.

Post by **NorthEast** » Wed Jul 02, 2008 8:03 am

You don't need to use tables or floats, just set the stylesheet properties for background-position and background-repeat, e.g.

background-position: right bottom
background-repeat: no-repeat

helen · Post by **helen** » Wed Jul 02, 2008 8:04 am

Dave Lee wrote:You don't need to use tables or floats, just set the stylesheet properties for background-position and background-repeat, e.g.

background-position: right bottom
background-repeat: no-repeat

That simple

Works perfectly - I was just trying to complicate it

helen · Post by **helen** » Wed Jul 02, 2008 8:30 am

Hmm, okay, that's not working as well as I thought. There's a repaint problem if the page is longer than the height of the skin. It paints another image bottom right when you scroll down but doesn't remove the first one until you force a repaint by resizing the window. Does anyone know a way around this one - or a way to force a repaint on scroll or similar?

Thanks

KevinDAmery · Post by **KevinDAmery** » Wed Jul 02, 2008 8:30 am

I knew there was a reason we kept Dave around....

Post by **LTinker68** » Wed Jul 02, 2008 8:46 am

I don't have Flare open at the moment and I don't remember the actual CSS property, but one of those repeat fields is supposed to have an option to keep the background stationary and move the text over it -- sort of anchor the image in place. You'll have to look around to see what the options are.

You could also create a DIV, give it a Z-index of 10 or something, and set its bottom and right values to 5 or 10px. Double-check that in IE6, though -- I can't remember if IE6 handles the right positioning field correctly on DIVs.

Pete Lees · Post by **Pete Lees** » Wed Jul 02, 2008 8:58 am

Hi,

LTinker68 wrote:I don't have Flare open at the moment and I don't remember the actual CSS property, but one of those repeat fields is supposed to have an option to keep the background stationary and move the text over it -- sort of anchor the image in place.

That's right: "background-attachment: fixed". So:

Code: Select all

body {

   background: url(FaintImage.gif);
   background-attachment: fixed;
   background-position: right bottom;
   background-repeat: no-repeat;

}

Pete

helen · Post by **helen** » Thu Jul 03, 2008 12:53 am

Working perfectly! Thank you all.

MadCap Software Forums

Background images not displaying

Background images not displaying

Re: Background images not displaying

Re: Background images not displaying

Re: Background images not displaying

Re: Background images not displaying

Re: Background images not displaying

Re: Background images not displaying

Re: Background images not displaying

Re: Background images not displaying

Re: Background images not displaying