- This topic is empty.
July 3, 2014 at 4:59 am #174463
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:
background: url(../img/backgroundLarge.jpg) no-repeat center center fixed;
/* -webkit-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.
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
areasbut 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.July 3, 2014 at 5:18 am #174466
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.July 3, 2014 at 5:36 am #174468
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?July 3, 2014 at 6:02 am #174472
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 itJuly 3, 2014 at 7:33 am #174480
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.July 3, 2014 at 7:54 am #174484
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.
- The forum ‘CSS’ is closed to new topics and replies.