I want to make a floating facebook or whatever link that hovers in the top left corner of my background image now. And the image that hovers would be for probably facebook or twitter.
Explaining more.
This is the normal background now
I don't think you mean floating. Do you want the image to stay in the same place while everything else scrolls past it? If so just give the image position fixed.
No its not like that. It would be put into the backround. I dont need it to stay in same spot. I need the clickable image added to the backround side using probably css
I'm afraid you can't make clickable background images on account of them not having any hyperlinking properties.
I suppose what you could do, is position a transparent image in the spot where the image occurs in the background and make that into a hyperlink.
Having said that, I can't imagine why we are discussing clickable backgrounds in the first place. You would normally just place the image in the online flow or inside a block element, such as a div (on top of the background).
Dr. V
__________________ Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.
Well, in your markup, you'd put something like: <div id="facebook_button"><a href="www.where-ever-it-goes/etc...l"><img src="facebook_link.gif" /></a></div>
Then in your style sheet you could say: #facebook_button {margin-top: 5px; margin-left:20px}
-------------------
Or you could do it simpler than that by specifying a position for your image, without bothering to wrap it in a div:
Or to write the margins as shorthand: {margin: 5px 0 0 20px}
Dr. V
__________________ Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.
Last edited by Doctor_Varney; 08-29-2010 at 11:29 PM..
Users who have thanked Doctor_Varney for this post:
Alright, neoweather, I'm understanding you now! What you said about putting the image in your background makes sense now, too. We couldn't understand, because where you're trying to put it, isn't what we'd call 'background', as far as CSS is concerned.
Right, for a start, to me, there's a structural problem to this. AFAIK, if you want something on the outside of that main container, you can't just shove it in at the start or any margins applied to it will start affecting everything else in the page. Don't quote me on this but my instincts tell me this will need another column, so it can be styled seperately to the rest of the page.
So from scratch, you need three columns, all floated left inside a container, which is margined 0 auto and while the important stuff in the middle silver box lives in the center column, you then have the left column free, to place that big F image anywhere you like, using a couple of margins.
I suppose an easier alternative would be to try it with a position:absolute; but I take no responsibility for what might happen after that...
Dr. V
Last edited by Doctor_Varney; 08-31-2010 at 12:56 AM..
Users who have thanked Doctor_Varney for this post:
So, I have done some work to my little side column- thanks to Dr. V
But i am wondering if i can make it in to some type of javascript that you can X out of. Near the top right corner of the image that says extra features.
Before you post, read our: 
My Idea about background floating....?
