css img resize

by toubia95

HTML

<div id="fond">
</div>

CSS

/*
http://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio
https://css-tricks.com/perfect-full-page-background-image/
*/
#fond {
display:block;
width:100vw;
height:100vh;
position:relative;
background-image:url('https://gtoubiana.github.io/rotations/compass/www/assets/images/boussole01-fond.png');
background-repeat:no-repeat;
background-size:contain;
}

/* https://www.sitepoint.com/css3-transform-background-image/ */
#fond:before {
  content: "";
  display:block;
width:100vw;
height:100vh;
  background: url(https://gtoubiana.github.io/rotations/compass/www/assets/images/boussole01-aiguille.png);
  background-repeat:no-repeat;
  background-size:contain;
  transform: rotate(45deg);
}