0

I am creating a website and as I am kinda new with html, I want all of my homepage to be a background picture taking up all the page - with two logos on it - and each logo, if clicked, would direct you to it's respective page.

I know that you can mask pictures with boxes/circles/polygons and click on a specific are of the pic to go to a link and some other are for other link, as seen in this tutorial: http://www.tutorialspoint.com/html/html_image_links.htm

The thing is, this requires you put the picture in using the tag, and I did it using the css code, so I could use it as a background image:

<style type="text/css"> html { background: url('wp-content/uploads/2013/07/main_menuu-1024x1024.jpg') no-repeat center center fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } </style>

...and I like the [contain] attribute because it resizes the image in all views and devices automatically, so is there a workaround?

Thanks in advance.

Update:

A programer friend of mine told me "Use anchor / Display block / Position absolute Use left %, top % and width height % Yes You are to be a dick And use an absolute positioned anchor blah"

But he wasn't very clear about that.

Tassos Mousoulides
  • 21
  • 2
  • 5
  • image maps are a really bad idea - its called mystrey meat navigation because the user has no idea where to click so they have to go hunting for the links and keep an eye of the mouse pointer. –  Jul 24 '13 at 13:24
  • As Jeff says, this is a really bad way to do this. What you want to accomplish should be done with multiple HTML elements and not just a background. – robooneus Jul 24 '13 at 13:27
  • Sounds like the friend was talking about positioning the logos. The question you probably should be researching is about how to position the logos the way you want. They should be their own HTML elements, as your friend said. – robooneus Jul 24 '13 at 13:39

1 Answers1

0

Jeff and roboonus are right.

If you really want something like this i recommend you to set your background image. And set one div with one link inside.

here is an example JSFIDDLE

with this kind of structure you can place the link as you want on the page.

f.vincent
  • 195
  • 1
  • 6