Hello, there! I’m having such a headache over this, and I really hope someone will be able to point me in the right direction!
I’m editing a tumblr theme with the GOAL of turning a sign pictured on my themes background image into the navigational links. I managed this by making the links themselves labeled as “…” and aligning them with the pictured sign, so that when you click on the sign, it acts a link. However, the alignment distorts when on a different computer or zooming in/out, making the dotted links shift away from the sign.
What you are asking is unlikely to work (If I understand correctly) as you cannot reliably match up foreground content to keep pace with a background image.
What you would usually do is slice the image so that its background is part of each anchor or possibly the whole sign could be the background to the div that holds all the anchors and then you size the anchors to fit each part exactly. You need the background to be in sync with the foreground content at all times and not some unrelated element that you are trying to absolutely place items against.
It would help if you could make a working demo of the page (codepen etc) as that pastebin is not much use to us as we need working html and css and not some code mixed with programming logic.
At the very least we may be able to help if we can see the image you are trying to convert and then perhaps we can suggest a better way to approach it.
The closest I hove done to anything like this is where you have a map image with links on it at specific locations on the map.
To do that and be responsive you need an image container with a fixed aspect ratio to hold the image, then the links placed within that container, absolutely using percentage values. You will probably need to size them via percentage too, this may result in them getting too small on mobile.
Yes it’s easy enough if you wan t a old-school rigid, fixed size design like it’s still the 2000s.
But these days you need a design to be able to adapt to an almost infinite range of screen sizes and aspects.
That is when basing things around a single background image gets tricky and probably needs a rethink, like breaking the image into element components that can be manipulated independently to rearrange the layout according to available space.
I’m good with old school rigid, 2000’s design, actually
As this coding won’t be SEEN on mobile and is unlikely to be used on kindles or anything other than a desktop or laptop, this functions just fine for its needs. In some cases, things just really don’t need to be over-complicated. But thank you for the input!
Glad you found something that works for your specific case.
How do you know?
I’m genuinely interested as most internet access these days is via mobile devices. Bear in mind that some tablets are bigger than laptops and some mobiles are nearly tablet sized so there is no real delineation between one platform and another these days,.
Of course you may have a limited or captive audience that you are catering for and you may well be able to get away with a fixed width screen size but generally we have to point out the best practices even if they may not apply to your specific case.:).
We try to cater for all devices where possible as this is the common approach these days…
If your background image a photo or a drawing? If a drawing, then you might be able to specify click areas if the drawing was SVG. The clickable area will resize with the drawing across any screen size.
