Reply To: Responsive background image problem

[mhodges44]

The background isn’t centered anymore because the width is 100%, that was my bad. It should be width: 80%. To make sure the footer does not overlap the bottom of the image, you should set
height: calc(100vh – 143px);

That will give you height equal to the vertical height of the window minus the heights of the header and footer.

As to your question about positioning the dots, if they don’t have to be perfectly in place on the map, but just in the general area, yeah you can position with %. You’ll have to play around with them, and they won’t be perfect, but a starting point would be:

.dot2 {
top: 42%;
left: 45.3%;
}

I am sure you can come up with a better solution with javascript that involves calculating the size of the background div and using some formula to calculate the top and left coordinates to set your offsets to if you really need, though.