View Full Version : My Idea about background floating....?

08-25-2010, 05:16 AM
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

But this is what I want-


08-26-2010, 01:02 PM
It would be like a floating image- help please!?

08-26-2010, 03:51 PM
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.

08-28-2010, 06:12 PM
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

08-29-2010, 12:03 AM
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

08-30-2010, 12:02 AM
Thanks Dr.V in what way could i post the Div?

08-30-2010, 12:26 AM
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:

<a href="whatever/blah/etc"><img id="facebook_buttonthing" src="facebook_link.gif" /></a>

#facebook_buttonthing {margin-top: 5px; margin-left: 20px}

Or to write the margins as shorthand: {margin: 5px 0 0 20px}

Dr. V

08-30-2010, 11:43 PM
What am I doing wrong with this?


I do not want it to have a seperate space at the top but be directly next to the logo at the top (to the left<)

08-31-2010, 12:35 AM
Use float:left

I can't understand what you want. :confused:

Dr. V

08-31-2010, 12:45 AM
Picture explains a thousand words

08-31-2010, 01:35 AM
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

08-31-2010, 02:42 AM
Look, something worked!

08-31-2010, 03:39 AM
Something's happened, though I'm not sure it's worked. The big blue F seems to have disappeared...

Dr. V

08-31-2010, 04:08 AM
I switched my ideas around but still it worked. I just dont want the big f there

09-01-2010, 01:19 AM
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.

More help needed Dr!

09-01-2010, 03:52 AM
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.

More help needed Dr!

Sorry, this is where the buck stops, matey. I don't do Javascript, PHP or any of that fancy stuff. :o

Glad you got your big F sorted though. :thumbsup:

Dr. V