Skip navigation

Dreamweaver CC

HoaAnonampour Calculating status...

Currently Being Moderated

Can I target a spot on a background image as a scalable, active link?

Sep 18, 2012 3:26 PM

Tags: #css #background_image #href #relative_positioning #relative_position

I'm using a background image in the BODY section of the HTML. The CSS settings for the BODY are:

background-attachment: fixed

background-image: url

background-repeat: no-repeat

background-size: cover

height: auto

padding: 0px

position: relative

width: auto

The parent element CONTAINER has its position set to absolute. In this way, the background image scales (mostly well) as the browser window scales.

I'd like to taget items in that background image to act as the navigation links for the site. i.e. a camera or a keyboard. As the background image scales, the relative position of the link has to move and scale as well.

I can get some of the scaling to work properly in Live Design mode in CS6, but none of it works when I view it in Safari, Firefox, or Chrome.

330 Views 3 Replies Latest reply: Nancy O., Sep 18, 2012 5:04 PM

Replies

Currently Being Moderated

1. Nancy O.,

Sep 18, 2012 3:52 PM in reply to HoaAnonampour

Report

If you MUST have a scalable background image, use the method described below.
http://alt-web.com/TEST/Resizable-BG.shtml

Use real navigation (CSS styled text links) because images or background images can neither be translated, searched, indexed by engines nor picked up by screen readers.

When you attempt to apply a link to a region on a scalable background or image map, the anchor coordinates won't re-scale with the image. As such your hotspots would never line up with your background. In short, this is a bad design idea.

Nancy O.

|
Mark as:
Currently Being Moderated

2. HoaAnonampour,

Sep 18, 2012 4:12 PM in reply to Nancy O.

Report

Thanks Nancy. Your code accomplishs the same thing with respect to the scaling of the background image that I achieved with the code above. Positioning and scaling the links is still the hurdle. I don't think it's a bad design idea, however, I realize there's no easy way to position the links relative to the background image coordinates in a way that allows the links to move in convert wtih the iamge and scale as well. It seems to be more trouble than it's worth, and apparently people have been looking for similar solutions for several years.

|
Mark as:
Currently Being Moderated

3. Nancy O.,

Sep 18, 2012 5:04 PM in reply to HoaAnonampour

Report

It won't work without a boat load of custom JavaScript. And if JS is disabled, the site becomes useless. That's why I said it's a bad design idea.

There are better ways to put stylish navigation on your site without layering it over a complex background image. Project Seven's Pop-Menu Magic is one commercial solution that works in all web devices.
http://www.projectseven.com/products/menusystems/pmm2/index.htm

Nancy O.

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points