CSS Layout How to - Show CSS orientation change using media screen

Question

We would like to know how to show CSS orientation change using media screen.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--from  w w w .  j a va  2s . co m-->
  background-position: top center;
}

@media screen and (orientation: portrait) {
  body {
    background-image:
      url('http://placehold.it/200x200');
  }
}

@media screen and (orientation: landscape) {
  body {
    background-image:
      url('http://placehold.it/200x300');
  }
}
</style>
</head>
<body>
</body>
</html>

The code above is rendered as follows: