CODEWITHSUNDEEP
htmlcsscss-position
James
James

Reputation: 81

CSS position div exactly over certain image point

I have a landscape image of a city sky line which will fill the users viewport at 100% wide, with an automatic height.

I want to position elements on top of that image on exact points of the image (say a particular building roof), but I need those elements to remain over those exact points when the viewport decreases/increases in size.

I've thought of absolutely positioning the elements (with the parent relatively positioned), but they just go "off target" when the viewport changes.

What's the most effective way of doing this?

Upvotes: 2

Views: 2544

Answers (1)

Alexander Dayan
Alexander Dayan

Reputation: 2924

background-size: cover automatically resize the picture to fit screen and absolute position with left and top in percents sticks the div on the same place relatively to the picture. See the following sample in the full screen mode and try to resize the browser window:

body{
  background-image: url('http://tinytour.org/wp-content/uploads/2015/02/beautiful-paris-wallpaper-for-home.jpg');
  background-size: cover;
}
#thediv{
  position: absolute;
  display: block;  
  top: 10%;
  left: 73%;
  width: 60px;
  height: 60px;
  background-color: rgba(0, 255, 0, .5)
}
<div id='thediv'></div>

Upvotes: 2

Related Questions