In this session we show how to add a background image to the header area of the Agility Skin for Thesis 2 using the header area package. We talk about background image positioning and when to specify a height for the header area based on the background image and header area contents.
Member: Okay but I think… well, what I’m referring to, Rick, is the header area itself, the full header area. Not like one of the boxes or one of the containers.
Rick: Okay so you’re not talking about a…
Member: Like a logo or the tagline areas. I’m talking about the whole width of the header itself.
Rick: Sure. So let’s… now is it a… how wide is the image?
Member: Well, I could scale it down. It’s currently… it’s 1920 pixels wide and 225 pixels in height. So I mean, I could cut it down to whatever size need be to fill a full width.
Rick: Well, is it the same all the way across? Is it a repeating background image? I mean, is that a background image that could be repeating?
Member: No. I don’t want to use a slice, no. This is a gradient image. It has a gradient from top to bottom and then it has some lighting in the center of it. So I could actually take the image, whatever size will fit and scale it down.
Rick: So yes, in that case, you’ll want to use the package. And the package you would use would be the header area package. Each of those horizontal areas has a package here. Now, most of them don’t have any CSS rules associated with them. I’ve just created the packages so that they’re there for you to change backgrounds in.
And so in that case, what you would do is you would take your header area and you go over to Options and then Background. And you’d put the background image URL here. And then the background position probably wants to be top center, right? So if you don’t put anything there, it’s going to be top left which means that when the page is smaller, your center spot would move.
Member: Yeah, I don’t want that.
Rick: So you’d want to put it in here at top center and then you’d want to say no repeat. And then the other thing you’re going to need to do though is specify a height. And so if you look at the CSS selector that’s here, it says #headerarea, right? And so you would come over here to… and just put in header area and then say height: 225 pixels.
Rick: And then what that will do and you’ll see what happens on my end when we do it, what that will do is make the header area taller.
Member: Got it.
Rick: So if you make the header area itself… now, most people should be cautious about specifying a height because when you specify an absolute height but you have contents in there that are greater than that height, then it stops looking the right way. So if your header contents are 300 pixels tall then you don’t want to specify a height for your header area.
Member: Got it, okay.
Rick: But if your header contents are 225 pixels tall then you don’t need to specify a height. You’d only be specifying a height to the header area if the contents of the header are less than 225 pixels tall.
Member: Okay and that’s if the logo and let’s say the widget area that I would place inside of the tag line area need to be smaller than… well of course, they would have to be smaller. But I wouldn’t have to specify them if my header height or if my header area was 225 pixels and those two images that I would use… well, one for the widget, will be smaller than 225 pixels, correct?
Rick: Yeah, if it’s smaller than 225 pixels then you need to specify a height for the widget area. I mean, not the widget area. You need to specify a height for the header area.
Member: For the header area, okay.
Rick: But if it’s not smaller than 225 pixels, let’s say it’s exactly 225 pixels, you don’t need to specify a height because the header area will automatically expand to wrap all the way around the header.
Member: Got it.
Rick: So the header area will automatically expand so if your image in the… in your widget is 225 pixels tall then you don’t need to specify a height. You’ll only end up needing to specify a height if the content of your header is not as tall as 225 pixels.
Member: Okay great. Awesome.
Rick: And so the danger is that you’ve specified the height of 225 pixels and your content’s actually 230 pixels. That’s going to screw up your menu in some browsers.
Member: It’ll warp everything, sure.
Rick: So you just need to be cognizant of… this is one of the reasons why Thesis actually doesn’t have any place for you to set heights of anything, right? I mean, you can set font sizes but you can’t set the height of a div or something like that because when you set a height, you have a chance of breaking the layout.
Member: And what would you recommend for width on a… let’s say, the header area image? You think 1920 is too big or that would encompass pretty much any kind of screen, right?
Rick: Well, it will. That means a mobile device is going to be downloading a 1920 pixel wide image. And so that’s the downside of using a great big image like that is that mobile devices end up using… seeing them. And I mean, you could use the… this is something I haven’t mentioned yet but there are…
Member: The media query, got it.
Rick: The media query box is here and you can go to the media query box and just say in here, you know, for the tablet landscape width, you can say header area background none. And then so for this width and every width smaller, there wouldn’t be a background image. So you could do that or you could specify a different background image for the smaller devices. Again, using the media queries.
Member: Got it, okay. Alright, I think with that, it would just be trial and error and see what works best. Because the images I’m going to put in there inside the header are not very complicated. They’re just basic images. So you know, when the responsiveness happens, I think they’ll scale down nicely.
Rick: Yeah and the responsive… I mean, every image in Agility ends up being responsive. Either it gets… well, pardon me. Background images of course, can’t be scaled so are never responsive. But besides the background images, the typical images are always responsive and will always scale to fit the available space. It won’t ever break out of the widths that are there for them. So header images is… if you’re not using the single column style where you’re actually swapping different images in an out for different sizes then every image is going to scale to fit the available space.