How to determine if a device is in portrait or landscape mode using CSS

Problem

For determining screen size I'm using media queries but I want determine if a device is in portrait or landscape mode using CSS so that I can have different background image as per screen size.

Any thoughts?

Problem courtesy of: Mayank Sharma

Solution

simply write media queries for landscape and portrait modes:

/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
}

link here

Solution courtesy of: user2377971

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.