From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Aspect ratio

Aspect ratio - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Aspect ratio

“

- [Instructor] Hi, I'm Chris Converse, and in this episode, we'll use CSS Media Queries to determine the aspect ratio of a webpage and use that information to switch between different background graphics. So if you'd like to follow along, download the exercise files, and let's begin by opening the html file in the text editor. And so once you have the html file open, you'll see that we have a pretty simple layout here. There's an article element with some content inside. And we're going to be applying a graphic to the background or the body element here using CSS. And if you open the webpage in the browser, you'll see that we're using the one-to-one aspect ratio or the square. So as I resize the browser, we're always using that square. So what we're going to do is use CSS to change that background graphic depending on the aspect ratio of the browser. So to do that, let's go back to the exercise files, and let's open up the style.css file in our text editor. And so once you have this…

Contents