The final part of this Customizing Genesis Child Themes with Background Images and Colors lesson is on how to use media queries to change up the images that you’re loading. And the reason you would want to do that here is that these images are way too big for a smaller device.
Use Media Queries to Specify Different Images
This is just fine on the desktop device but as soon as you start using a smart phone, you don’t want to download a 1600 x 900 image onto the phone in order for the browser to open up. So, what we’re going to do with this is we’re going to specify a couple of different images.
But before we do that, I’m going to have to upload those images. I created two for our purposes here. I created one for the bigger tablets and one for smaller tablets which will be used for the smart phones as well. So my My Business Website, Images and then I’m looking for background-phone and background-tablet.
Media Queries Genesis Uses
I’ll open those up and while those are loading we’re going to come and take a look at the media queries that Genesis uses. Let’s inspect this element and we’ll come over to the style editor and pick the Eleven40 style CSS which is the main style sheet. Let’s scroll down here till we find the media queries and they are way down at the bottom.
So the first media query that we’re going to use is this one right here, this is the iPad portrait and we’re going to say @media only screen (max-width: 1023px). We’re going to start off by capturing this, come back over here to our custom CSS. It’s best for our media queries to go at the bottom of all of this.
Notice how that’s bright red? Well, that’s because it’s missing a closing tag so we’re just going to close it up first and this @media is going to wrap another set of rules. In this case, it’s going to wrap this rule. We don’t need to repeat that, it’s center top, attachment:fixed or the like so we can go ahead and delete that.
Change the Background Image for Different Devices
Notice when you click on one of these, its companion highlights. We do want to change this background image and we’re going to change it for the tablet here and then while we’re at it, we’re going to come look at their media query for the next version down. Let’s scroll slowly down untill we find the media query for the iPhone’s portrait and landscape but it’s actually bigger than an iPhone.
We’ll say @media only screen (max-width: 767) and we’ll use the next image down for that so here are our two media queries. When I hit Enter that gave me a new one. Hit Enter again and choose body-background. For this one, we’re going to choose the smaller background image so on the larger tablet devices, we’re going to get an image that is smaller than the big one but still big enough to fill the screen. On this one we’re going to get even a smaller image that’s still big enough to fill the screen.
I think we’re going to do this one more time on the smaller ones and for the smallest device we’re going to say no background image, this one right here (max-width: 320px). Now, instead of a URL we’re going to say none.
So now we have 3 different background image configurations depending upon which mobile device is viewing the site and this is the kind of thing that’s necessary when you are customizing a responsive site, right? You need to consider what happens to mobile devices when they visit the site.
So now we’ll save the Custom CSS and come back over to take a look at it. We’re also going to look at it in the responsinator. Here’s the 320px wide one and it’s not showing any background image and here it is in the other direction. It is actually showing the background image but interestingly enough, it is only getting the blue sky because of the size of the device. So it could be that you want to say background-image:none on a bigger range here. This one actually is getting some background more than just sky and this one is getting more than just sky. Obviously this one is getting what you would expect but nevertheless, a smaller image.