how do I add images using absolute positioning?

Hi, I've done this on other sites before but I cant seem to get it to work on this one. Here is what I was trying for a test to see where it is and adjust but nothing shows.

#sticky {
	background-image: url(../images/sticky.png);
	position:absolute;
	left:168px;
	top:143px;
	}

Sorry, but I have to ask. Is sticky.png in the images folder in your template's folder? Or is it in the main images folder? Your style refers to the former location.

Also, just as a test, make the image a jpg and see if it works. (You never know.)

Rob

I changed them to jpg and I uploaded it to both folders and also changed the css to reflect the jpg. Still nothing.

This piece of code seems to be okay, but maybe you8 made an error in the code before #sticky. See is you can find any missing brackets or semicolons.

I checked and no missing brackets or semicolons.

Just to make sure though, when using this code it should show the image on top of anything else in the page, right? I mean it isn't hiding under another image or anything.

Also I shouldn't have to put anything on the page it should just show because the css says it is supposed to. right?

I've changed the numbers around as well as the images and I can't ever get anything to show. I have the code added to the index_home.css at the bottom. Should the placement make a difference. I have also tried this on the stylesheet.css and still nothing on the other pages as well.

ScottDB:

I checked and no missing brackets or semicolons.

Just to make sure though, when using this code it should show the image on top of anything else in the page, right? I mean it isn't hiding under another image or anything.

Also I shouldn't have to put anything on the page it should just show because the css says it is supposed to. right?

I've changed the numbers around as well as the images and I can't ever get anything to show. I have the code added to the index_home.css at the bottom. Should the placement make a difference. I have also tried this on the stylesheet.css and still nothing on the other pages as well.

I is possible it is "hiding" underneath something else. what happens if you add a z-index to it?

Don't know what you mean by a z index to it. Never seen that one before. Can you show me the code to add?

#sticky {
	background-image: url(../images/sticky.png);
	position:absolute;
	left:168px;
	top:143px;
	z-index:5;
	}

What element has the #sticky id? I don't see it in your homepage view source. Does it have something else in it beside the background-image? If not, there will be nothing to give it size and you will not be able to see it.

Oh ya, sorry about that. I took it out when doing some more editing figuring that it wasn't working anyway. I was trying to put in the define page editor for main page. I take it that is not where it should go. :P Not sure where to put it or if I got it right.

Here is what I am trying to use.

<div class="sticky">

That should work, as long as there is something inside the div to give it size. What is the entire div content you had? Can you put it back so I can take a look?

Well that's probably what is wrong then since I just barely understand how this works. Kind of a newbie.

That was the entire content of the div. I just added that to the end of the define page editor/ index page just like that. Just the css code that I had shown and the <div class="sticky"> in the page

You have nothing in the sticky or in the stylesheet.:dontgetit

Except for 16 <br> tags!

Well I just checked and all the way at the bottom of the index_home.css I have the code that I posted above

#sticky {
	background-image: url(../images/sticky.png);
	position:absolute;
	left:168px;
	top:143px;
	}

In the define main page I have towards the top of all those </br>'s the <div class="sticky"> and oh dang. I just realized that even though I don't know what you mean I should be putting into the sticky I don't even have an end </div>

That will not load.
Should be in stylesheet.css or something like stylesheet_home.css or it won't load.

Ok I'll try and rename the template but that is what was told to me to do in another post and it seems to be working for everything else.

The index_home.css and the regular stylesheet.css (neither is a template) are butting heads and if you use firebug you'll see that the background image never shows up.
You might try the .jpg fix mentioned earlier. If you are using png for transparency, it just doesn't work well enough to try.:no:

Sorry, Mistake on wording. I meant change the name of the stlyesheet index_home.css. I did rename the image to jpg and in the css as well just now. Did it earlier but when I added it back in later I forgot to change it again.

The reason that the stylesheets are butting heads are probably because I didn't do what was suggested and just add the edits I made to the original stylesheet. I just used the whole stylesheet and renamed it. I was planning on going through that later and deleting all the stuff that wasn't changed out of the index_home.css

#sticky {

# is the symbol for an id, not a class. You need to either change that to . or change class= to id=.

.sticky {

Thanks for the info. I tried it again with no luck. I knew that the two were different but didn't know which one was for what. I tried it with both id and class and nothing shows. I even tried them both with different left and top coordinates. Here is what I am using

.sticky {
	background: url(../images/sticky.jpg);
	position:absolute;
	left:168px;
	top:43px;
	}

With this I am using <div class="sticky"></div>