Build Your Own Business Website header image

How to Use Carta Media Queries to Make Background Images Responsive

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to use Carta media queries to make the background images responsive and show the best way to layer text over a background image. We discuss spacing issues with background images. And we also demonstrate how to change the CSS in the media query itself for a background image and background color and make it responsive in different devices so that all of the image content is displayed.

Video Transcript

Member: Alright, this is my front page and the challenge that I have, I’m looking for the best way to skin this particular path. If you scroll down a little bit, I have a text box below that has the green background. I decided you know, I just want to class it up a little bit, I want to put this on the chalkboard and it’s messing about but I’ve decided that this is worth the effort for me. So I played around different ways to do it, probably spent a lot more time than I should have, and what I’m looking for is, what is the best way for us to layer text over a background image. Right now I only have a html container with the chalkboard as a background image…

Rick: That’s perfect.

Member: And a text box laid over it. But I’m not getting the full image of the chalkboard unless I really play around with the amount of text.

Rick: Well, what you have to do is specify the height of div id chalkboard box. Because background images don’t actually take up any space. If all you had though is Does your child struggle with school, then this one will be all the way up here under that.

Member: Exacly

Rick: Because background images fills space but they don’t take up space…

Member: Right

Rick: So if you want your space to be at least as big as your background image, then you need to give that space a dimension. Npw what I would say is…

Member: Okay, so I would just assign that to the div that’s the container…

Rick: #chalk_board_box here {, right here, I would just say min-height:412px; Since it’s responsive, you don’t want to say specifically height, because, actually this is going to be inclusive of padding and margin so you could get rid of the bottom padding…

Member: Yeah, the bottom padding is just the way, in a text box that I was looking to add some space to try and get that image to show.

Rick: Right

Member: So then that make sense for me to go ahead and assign minimum height and then my thinking because that would then make this image not responsive in some mobile that I would use a mobile query box and basically, to have this just show for screens. Unfortunately because I’m using the 431 column, I realize that I’m not going to be able to get this on tablets… that the width is still too wide for tablets, so I’m probably just going to have this show on desktop and then I have to go to that other one for mobile devices and assuming I just used the media query boxes…

Rick: Okay, so, what I would do for this instead of using the media query box for it, is just change the css in the media query itself. So for example, colorzilla, pick that color there… grab that color and then come over here to Skin Design, go down to Custom Media Queries and then you could go to tablet media devices, it’s probably Tablet Devices, Portrait. It probably works just fine in landscape, doesn’t it?

Member: Well, typically not because right now that image, I think is 720 pixels and a lot of landscape dimensions are smaller than that.

Rick: Well, the tablet landscape is usually…

Member: I’m sorry, I just (4:44)

Rick: Yeah okay, so this is where I would have it start at and then I would just say .carta #, what did you call that thing? chalk_board_box{ and then background-image:none; and background-color: and then paste that color…

Member: Alright.

Rick: Then what would happen is, in this version and smaller, the image would go away but that color will go in you still have the color of the chalkboard even though you wouldn’t have a chalkboard frame. And that box would expand in height and contract in width until, in order for it to display all of its content.

Member: Right

Rick: Okay, so that’s a much easier way to do it than creating a whole separate div and having 2 media queries that are excluding certain devices.

Rick: Right, here’s one of the main reasons for this, custom media query function. First off, you’ve put in Carta to make sure that it makes precedence over any other rules. Okay, then you’ll use the selector that you’re using. Then essentially, what you’re doing is negating the rules. So you’re changing the rules once you get in this condition, that is table, portrait. And the rule is get rid of background image and give it a background color.

Member: Alright, would you mind popping that in to responsinator, it seemed to me that even in the landscape mode it was cutting off the image which maybe just a matter of my having the width too wide.

Rick: Okay, so here, yeah… that’s what’s going on there, what I would do in fact… it almost feels like what’s happening…

Member: Yeah, this is a page that you know, I left at 1 o’clock in the morning last night and say, okay, I’m just going to leave it as it is, Rick can… you know, there’s a lot of messy codes in there perhaps.

Rick: Well, what I would do with this I would make that image 650 pixels wide instead of the 718.

Member: Right. And I had it, it’s 640 originally because I was using your standard sizes until I realized I’ve gone to a 431 column alignment and that 640 and 320 wasn’t quite as applicable, right? (laughs)

Rick: Right. Well, the thing is you want some more padding over here… and what’s happening is the dimension here is gettings slightly smaller… 789 no, it is getting 718. Okay, let me take that back… what I would do is just do a different image size for the tablet, so…

Member: Okay

Rick: Again, back over here, I would come to this tablet landscape media query, and enter a different background image for Carta chalkboard. So you have your standard background image for the desktop, and then you have a smaller background image for this version…

Member: Sure

Rick: And in fact, you could if you wish, take it to another step further and do a different background image for in this view. And then…

Member: Yeah, because the text box is responsive. So, okay…

Rick: Right. The box itself is responsive because the background image needs to change in size in order to show everything. And it is just change in size and configuration, it’s both height and width.

Member: Yes. To make sure that all the text box is still overlaying the image.

Rick: Right.

Member: Yup, alright I knew that there was a better way, I just didn’t know what it was.

Rick: Yeah, well, that’s the challenge of using background images in a responsive site and that’s why this custom media queries is available to you in Carta and Agility so that you can make those kinds of changes easily without having to write your own media queries.

Member: Right. And so I would just pull up the different href for those different images right there in the code in the media query.

Rick: Right, just background image, URL. (11:20) That’s all you have to do.

Member: Great.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one