Build Your Own Business Website header image

How to Position an Image so that it Spans the Full Width of the Page

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 discuss how to position an image so that it spans the full width of the page. The Thesis theme has padding and margin around elements so we need to override Thesis’ padding and margin by using absolute and relative positioning. We also suggested that you watch our seminar videos on the Position Property.

Video Transcript

Member: Somehow, I want just the width of this picture should be exactly matching the space of the white space the page right here.

Rick: Okay.

Member: I just couldn’t get lined up. It’s not that you know, I probably can do that you know, if I play around it. But my poblem is I have a hard time to figure out which code I should change, which class or which ID I should change. It seems like I get lost a little bit on that.

Rick: Well, the problem is that Thesis has padding and margins around things. And so the only way for you to have a page that is 1000 pixels wide and have an image that’s also 1000 pixels wide in that page is for you to essentially override Thesis’ padding and margin.

Member: Right.

Rick: Now, the way I would do that is to use absolute and relative positioning. So the first thing I would do is I would wrap it in a div and give that div a class and then I would take the image and I would give it a different class than this one here. And then make the wrapping div, give it a position of relative and then the image class, I would give a position of absolute. And then a left of minus… looks like 40 pixels or something like that so it will move it over to the right. Do you know what I mean by absolute and relative positioning?

Member: Yes, yes I think I know what you’re talking about.

Rick: Okay now I have a seminar on using absolute and relative positioning for just this sort of thing. So if you go…

Member: Which one is it?

Rick: It’s actually all the way at the bottom of my seminar list, so if you look at seminars, it’s in that quick access bar which is down there at the second… yeah, there you go. And then yo uscroll all the way down to the bottom because it’s in the miscellaneous seminars. You can see, understanding the position property, right there?

Member: Yup.

Rick: That’s it.

Member: Okay, I’ll take a look at it.

Rick: And so if that’s the effect you realyw ant, that’s what I would do to get is use absolute and relative postioning for those special things like that rather than changing padding and margin.

Member: Yeah because I was worried about if I can… even though I can fix this individual picture position then I might screw up other pages. Because then I’m like, “Okay, should I assign a class to…” Because I took a course on those styling individual pages versus a group of pages. I thought maybe I should assign a CSS style name for a group of pages if I want to do line off the same way.

Rick: Yeah, you can do it that way too but I think it’s probably easier for you to just wrap the image in a div, give it a style, wrap… and then change the style of the image itself. And then you can use that same system every time you have an image like this. And you’re not changing any pages then. What you’re doing is you’re saying, “When I have an image that I want to be full width then what I’ll do is I’ll wrap it in this div and then I’ll give it this class.” And then once you have that div, the image class definition and the div definition in your css file you know, it’ll apply to every single instance of that.

Member: Okay, gotcha.

Rick: And that’s going to be the easiest way to handle it.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment