Image (location pins) on top of background image

[ANdrw]

Hello,

I’m using bootstrap 3 to build a landing page. I have this background image of a neighborhood on top of which I want to have some location pins for some of the houses. See this image: http://i.stack.imgur.com/LFkKU.jpg

I want the background to resize so I’ve used the code I found on css tricks:

body {
background: url(../img/backgroundLarge.jpg) no-repeat center center fixed;
/* -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
}

Anyway, Ideally for me the pins wich are separare images should stay in their correct position, on top of the houses as the browser window is resizing.

Could this be done via css / javascript? I’m not even sure I posted in the right place. A jsfiddle or something would be really appreciated.

[Paulie_D]

A jsfiddle or something would be really appreciated.

Yes it would…perhaps you could provide what you have so far in a Codepen.io example.

In general, this is quite hard with background images. It gets a little easier with inline images and areas but making this responsive adds another layer of complexity.

There are other options including SVG (the new big thing) which has awesome flexibility for this kind of thing.

[ANdrw]

Thanks for the reply Paulie, here’s the most basic example: http://www.bootply.com/xhBIV2zSig

The two black pins would have to stay on top of thw two houses in the middle. I don’t know much about svg. If it’s easier with inline images and still keep the same background what would be awesome, I just don’t know how.

If I could just keep the background image in a fixed position without resizing it when resizing the window I guess that will work.

[Paulie_D]

Well, the thing is that you would have to position each marker individually, probably using absolute positioning (using percentages rather than in px values) in a container with relative positioning..

That would make it fiddly to say the least…how many markers are we talking about?

[ANdrw]

6 actually. I’ve managed to talk to the owners and they don’t want an absolute positioning on top of some houses, as they will only use that to display some featured text on top of them. But still, if that would be possible, I’d really appreciate it

[Paulie_D]

There are other methods using an inline image and ‘image maps` but styling them can be a little difficult with pure CSS.

It’s an old technique.

[Paulie_D]

He’s the absolute positioning way…6 is a reasonable number so it’s not a huge issue.

I’ve also included a pop-up for any text they might want when hovering over the ‘pin’.

If you resize the browser window it _ should_ scale accordingly. You could refine it with media queries to make the hovered text smaller at different widths though.

It’s quick and dirty but it shows you the basics.

http://codepen.io/Paulie-D/pen/dgcha

[Author]

Posts