Background Image / Image Map 1

crabsodyinblue · Feb 16, 2006

Is it possible to have a page where I have a background image which has a fixed position on screen. (using CSS)

that can be used an image Map - or can have areas of the image defined as clickable areas.

i.e.

In the example below is it possible to use the image imagefilename.jpg in a way similar to an image map.
baring in mind that the page can scroll up and down but the background image will remain in a fixed position.

STYLE TYPE="text/css">

#pagebackground { background-attachment: fixed;
background-image: url(imagefilename.jpg);
background-attachment: fixed;
background-position: 0px 0px;
background-repeat: no-repeat;
overflow:auto;

}
</style>

<body bgcolor="#660066" id="pagebackground" border=0 marginheight="0" leftmargin="0" topmargin="0">

Thanks in advance

ca8msm · Feb 16, 2006

I wouldn't have thought so - it's a background image so you wouldn't be able to access it as there are elements over it.

You could look at it from a different angle though and use standard image with a fixed position (with a workaround for IE) to keep it on the screen.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

Vragabond · Feb 16, 2006

Take a look at these techniques:

http://www.frankmanno.com/ideas/css-imagemap/

http://www.alistapart.com/articles/imagemap/

crabsodyinblue · Feb 17, 2006

Thanks to both ca8msm and Vragabond for taking time to reply.

The link that Vragabond sent

http://www.alistapart.com/articles/imagemap/

proved very useful, this technique works fine, provided the page is not scrolled.

However I've got round this problem by making the page fixed by added

overflow: hidden;

to the style for the BODY tag , and having the content I wanted displayed in a scrollable inline frame/layer.

The problem I had originally was the design look of the page included a curved arc of the right hand side, that had buttons/circles which followed the line of the arc.

I found the easiest way of creating the arc, was using a background image.

Thanks for your help.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Background Image / Image Map 1

crabsodyinblue

Programmer

ca8msm

Programmer

Vragabond

Programmer

crabsodyinblue

Programmer

Similar threads

Part and Inventory Search

Sponsor