CSS for hyperlinking an image

[mani_r]

Hey everyone

I am new to CSS, and I need some help with creating a follow button for Facebook on my website.

So far I know the code for uploading an image on my website, so I thought if the image that I am uploading was actually hyperlinked to Facebook, it would do the job. I am using the following lines to upload the image:

header {
 background-image: url(http://folder.example.com/static/54709596e4b08efc8c7642a8/t/54a58eaae4b0ab38feda62dd/1420136106808/Call+Now.png);
 background-repeat: no-repeat;
 background-position: 1090px 100px
}

Is it actually possible to hyperlink an image using CSS? Or do I need to do something else?

Many Thanks

[edited by: not2easy at 11:37 pm (utc) on Jan 2, 2015]
[edit reason] Please read the TOS [/edit]

[not2easy]

CSS is for styling the elements of your html, with css you can change the way your site looks or change the appearance of links. HTML is what you use to create a link and you can use an image for the link.

To add a link to another site you would use a html link. If you want people to click the image, you would add the image to your link like:

<a href="http://www.example.com/pages/apage.html"><img src="http://www.example.com/images/niceimage.jpg" alt="an image"></a>

and you put your button image URL where the image in the example is and the actual page URL you want to link to where the example URL is.

In the forums we use example.com instead of real domain names. It prevents accidental links.

[mani_r]

Thanks for your reply.

I had a feeling it wasn't going to be that simple...

That worked great. How do I alter the location of the image now? It's positioned on top of the page in the middle, I want it to be on 100px down from the top and 200px from the right side of the page.

[not2easy]

Be careful of setting absolute positions. It may look great on your browser and for the majority of visitors it may cause a scrollbar horizontally. Look through your stats and see what size of screens are accessing your site, make it a relative position and it will look the same for all screen sizes. Don't position the image or the link, position the container element, the <p> or <div> that contains it.

Lets say your link is contained in a <div> and it is the only thing in that element. If you want it to take up an entire "row" on your page, set the <div> to a width of 100% and set a top margin of 100px. Set text align to right and add 200px padding-right.

This is very simplistic use of css and it seems you might want to learn more about how to use css. While it is not the ideal in 100% accuracy I still suggest you take a look at w3schools site for a free place to learn and get experience with css and html.

These forums help you when you have a particular problem making something work the way it "should" but it is a poor place for a tutorial, it could take you months to cover here what you can pick up in an hour trying it yourself and reading how it works at the w3schools site. For authoritative css help, see: [w3.org...]

[mani_r]

You're absolutely right, well I'm off to W3school, wish me luck :)

[not2easy]

Good luck mani_r, I do wish you luck and I hope it helps you with the basics.