Hi folks!

I’m starting a new project for a friend. We want to make something that looks sort of like the WordPress theme below, with something a little extra.

Ideally, we would have menu items/logo that sit on top of a background image that extends to the edges, just like you see here, but instead of links styled with CSS attributes, we would like to have imagemap links based on an image, instead of the “Start Now” and “Download” links. So in this example, we would take away these link buttons, and instead have a couple of the tips of the mountains be the links.

Post image

My plan is to use https://imagemapper.noc.io/#/ to create an SVG-based imagemap, so that it can be responsive/scaleable.

Normally to achieve this full-bleed, I believe one would set the image here using the CSS background element, but I don’t think I can do that and *also* have the above imagemap functionality. If I put the image in via HTML, I don’t think it will extend to the edges… and then I’m not sure how I would position the logo/menu items on top of the image in a responsive way.

Any suggestions about how to construct this? I’m only an occasional developer so I’m having a hard time figuring out the best way to approach it.

Source link

Write A Comment