The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive background image problem Reply To: Responsive background image problem


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.