Make the avatar the full size of the MP

[Alan Vende]

Michael Stone has his avatar as the full size of his MP, so does Brian Ordonez. I looked on W3Schools and thought about Overflow: but that didn't look like it was correct.

I was wondering how you make it so the avatar is the whole mini-profile.



I want it to be the above.

And I have the below:



I got it so the repeat isn't visible, so there's only the one on the top, but I can't think of how to make it so the MP is on the whole MP like above.

Can anyone steer me in the right direction?

Thanks so much!

[Tumbleweed]

Alan Vende,

Since I can't see your coding I can't say for sure but this might help. I have this image:




And to make it fit a 400 x 800 div I inserted another div with this css:

.test{background-image:url(http://storage.proboards.com/3393080/i/ydTkztzVGhB9VEchkN1b.png);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center top;
width:auto;
height:800px;
}

As seen here: putteraroundviii.proboards.com/

Hopefully that might help you out.

[Alan Vende]

Oct 25, 2015 8:59:02 GMT -8 Tumbleweed said:

Alan Vende,

Since I can't see your coding I can say for sure but this might help. I have this image:




And to make it fit a 400 x 800 div I inserted another div with this css:

.test{background-image:url(http://storage.proboards.com/3393080/i/ydTkztzVGhB9VEchkN1b.png);

background-repeat:no-repeat;

-webkit-background-size:cover;

-moz-background-size:cover;

-o-background-size:cover;

background-size:cover;

background-position:center top;

width:auto;

height:800px;

}

As seen here: putteraroundviii.proboards.com/

Hopefully that might help you out.

Thanks, Tumbleweed! It didn't occur to me to put the whole template here with my question. I will try this once I get to my computer. I will also post the template here.

[Tumbleweed]

Alan Vende,

What I gave you keeps the proportions and thus cutting off some of the width (I just now noticed) so that isn't quite right yet but I'm not sure one wants to distort an image anyway but no time to try to look into this further right now.

Edit, I didn't expect you to post the template but link to a site you have it on that I can see. But no biggie. 

[Alan Vende]

Oct 25, 2015 9:56:17 GMT -8 Tumbleweed said:

Alan Vende,

What I gave you keeps the proportions and thus cutting off some of the width (I just now noticed) so that isn't quite right yet but I'm not sure one wants to distort an image anyway but no time to try to look into this further right now.

Edit, I didn't expect you to post the template but link to a site you have it on that I can see. But no biggie. 

I am trying it now. Thanks so much, Tumbleweed!

I forgot to link to it, sorry! It's on a TestTheme of mine. I'm still trying to get bugs out before I use it on my forum: pp-testforum.proboards.com/thread/3/test.

[Alan Vende]

I just implemented it on my test site, Tumbleweed and I think it's because of the way the avatar is that it's like that. I wonder, though. What do you think of it? Does it look good? Or is my nose too big?

[Tumbleweed]

Oct 25, 2015 11:39:22 GMT -8 Alan Vende said:

I just implemented it on my test site, Tumbleweed and I think it's because of the way the avatar is that it's like that. I wonder, though. What do you think of it? Does it look good? Or is my nose too big?

You sure you gave me the right link or is the wrong theme showing for me because I just see a normal mini profile with a normal avatar and a normal nose ...oh wait, does your avatar have a nose? lol Anyway, I can't see anything different.

[Alan Vende]

Oct 25, 2015 22:28:08 GMT -8 Tumbleweed said:

Oct 25, 2015 11:39:22 GMT -8 Alan Vende said:

I just implemented it on my test site, Tumbleweed and I think it's because of the way the avatar is that it's like that. I wonder, though. What do you think of it? Does it look good? Or is my nose too big?

You sure you gave me the right link or is the wrong theme showing for me because I just see a normal mini profile with a normal avatar and a normal nose ...oh wait, does your avatar have a nose? lol Anyway, I can't see anything different.

I thought I had the MP on the default theme. I put the theme with the MP on it as the default theme. Sorry about that!

[Tumbleweed]

Oct 26, 2015 8:27:37 GMT -8 Alan Vende said:

Oct 25, 2015 22:28:08 GMT -8 Tumbleweed said:

You sure you gave me the right link or is the wrong theme showing for me because I just see a normal mini profile with a normal avatar and a normal nose ...oh wait, does your avatar have a nose? lol Anyway, I can't see anything different.

I thought I had the MP on the default theme. I put the theme with the MP on it as the default theme. Sorry about that!

That's O.K., I've done that myself and just recently  and I should know better since it happens all the time on ProBoards. Anyway, I can see it now and I think that is the best you can expect. The alternative would be to have the width all show but it be super distorted because of the extra height it has to stretch which is probably double in height. You could try it so it fits the width and see if you like it better that way, regardless of the stretching,  but to be honest, I'm not sure what that code would be. 

Actually, hold on here....let me stretch it like it would ROUGHLY be if we made the full width show:



What do you think?

[Alan Vende]

Oct 26, 2015 10:29:13 GMT -8 Tumbleweed said:

Oct 26, 2015 8:27:37 GMT -8 Alan Vende said:

I thought I had the MP on the default theme. I put the theme with the MP on it as the default theme. Sorry about that!

That's O.K., I've done that myself and just recently  and I should know better since it happens all the time on ProBoards. Anyway, I can see it now and I think that is the best you can expect. The alternative would be to have the width all show but it be super distorted because of the extra height it has to stretch which is probably double in height. You could try it so it fits the width and see if you like it better that way, regardless of the stretching,  but to be honest, I'm not sure what that code would be. 

Actually, hold on here....let me stretch it like it would ROUGHLY be if we made the full width show:



What do you think?

The gears in my brain are working slowly. I could just rework the width and so forth of the MP itself so it doesn't look distorted. I mean, working with the background there.

Sorry if that doesn't make sense when put into words!

I was just thinking 'out loud' on how to get it to work. I mean, Michael's doesn't look distorted and that leads me to believe that he uploaded the image and didn't use the Avatar Creator.

I think if the width and height and whatnot of the actual MP is changed, it wouldn't look distorted. I like, though, what you did.

Thank you for taking the time to help me with this!

[Tumbleweed]

Oct 26, 2015 11:13:18 GMT -8 Alan Vende said:

Oct 26, 2015 10:29:13 GMT -8 Tumbleweed said:

That's O.K., I've done that myself and just recently  and I should know better since it happens all the time on ProBoards. Anyway, I can see it now and I think that is the best you can expect. The alternative would be to have the width all show but it be super distorted because of the extra height it has to stretch which is probably double in height. You could try it so it fits the width and see if you like it better that way, regardless of the stretching,  but to be honest, I'm not sure what that code would be. 

Actually, hold on here....let me stretch it like it would ROUGHLY be if we made the full width show:



What do you think?

The gears in my brain are working slowly. I could just rework the width and so forth of the MP itself so it doesn't look distorted. I mean, working with the background there.

Sorry if that doesn't make sense when put into words!

I was just thinking 'out loud' on how to get it to work. I mean, Michael's doesn't look distorted and that leads me to believe that he uploaded the image and didn't use the Avatar Creator.

I think if the width and height and whatnot of the actual MP is changed, it wouldn't look distorted. I like, though, what you did.

Thank you for taking the time to help me with this!

If you look at Michael's, he has the regular avatar and once loaded, it too has the sides cut off so I think we pretty much have your avatar as good as it will get mimicking Michael's. (Try refreshing the page and you can get a glimpse of what his looks like as a normal avatar.)

[Alan Vende]

Oct 29, 2015 15:35:57 GMT -8 Tumbleweed said:

Oct 26, 2015 11:13:18 GMT -8 Alan Vende said:

The gears in my brain are working slowly. I could just rework the width and so forth of the MP itself so it doesn't look distorted. I mean, working with the background there.

Sorry if that doesn't make sense when put into words!

I was just thinking 'out loud' on how to get it to work. I mean, Michael's doesn't look distorted and that leads me to believe that he uploaded the image and didn't use the Avatar Creator.

I think if the width and height and whatnot of the actual MP is changed, it wouldn't look distorted. I like, though, what you did.

Thank you for taking the time to help me with this!

If you look at Michael's, he has the regular avatar and once loaded, it too has the sides cut off so I think we pretty much have your avatar as good as it will get mimicking Michael's. (Try refreshing the page and you can get a glimpse of what his looks like as a normal avatar.)

The change is very quick, basically upon full page load. I see that the avatar is there, but the MP is also there.

Thanks so much, Tumbleweed!

[Tumbleweed]

Oct 30, 2015 3:19:20 GMT -8 Alan Vende said:

Oct 29, 2015 15:35:57 GMT -8 Tumbleweed said:

If you look at Michael's, he has the regular avatar and once loaded, it too has the sides cut off so I think we pretty much have your avatar as good as it will get mimicking Michael's. (Try refreshing the page and you can get a glimpse of what his looks like as a normal avatar.)

The change is very quick, basically upon full page load. I see that the avatar is there, but the MP is also there.

Thanks so much, Tumbleweed! :DI 

I only posted about the avatar before it loads into the full width/height of the mp because the end results is cutting off the sides substantially, just like yours. Michael is indeed using an image and it is a rather large image (450x413 pixels) so the quality is likely better than the avatar maker, as you said. His original image shows the full width of the kids shoulders and then some extra space after that. So I guess what I'm saying is, you can expect to lose some of your image on the sides doing this unless you want to distort the image and no doubt the quality may be diminished if using the avatar maker so I really don't think there is a better way to do this.

But if you want the full width of the image but then distort to make the full height: It would be: 

.class here{
background-image:url(http://imagehere.png);
background-size: 170px 325px;
background-repeat: no-repeat;

without all this:

-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size:cover;
background-position:center top;

[Alan Vende]

Oct 30, 2015 8:50:42 GMT -8 Tumbleweed said:

Oct 30, 2015 3:19:20 GMT -8 Alan Vende said:

The change is very quick, basically upon full page load. I see that the avatar is there, but the MP is also there.

Thanks so much, Tumbleweed! :DI 

I only posted about the avatar before it loads into the full width/height of the mp because the end results is cutting off the sides substantially, just like yours. Michael is indeed using an image and it is a rather large image (450x413 pixels) so the quality is likely better than the avatar maker, as you said. His original image shows the full width of the kids shoulders and then some extra space after that. So I guess what I'm saying is, you can expect to lose some of your image on the sides doing this unless you want to distort the image and no doubt the quality may be diminished if using the avatar maker so I really don't think there is a better way to do this.

But if you want the full width of the image but then distort to make the full height: It would be: 

.class here{
background-image:url(http://imagehere.png);
background-size: 170px 325px;
background-repeat: no-repeat;

without all this:

-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size:cover;
background-position:center top;

I thought that the webkit and whatnot was so it's compatible in other browsers. Thank you, though, Tumbleweed. I am going to stay with what I have now. I have re-created my MP to an extent that has helped me show my display name better, and that's mainly why I wanted to go to the pre-made example, but I wanted to put may avatar in it because that's what people know me as - the guy with glasses and a backpack, always wanting to learn new things.

Thanks so much for your help! If I want to change it in the future, I will keep this thread in mind.

[Tumbleweed]

Oct 30, 2015 9:03:46 GMT -8 Alan Vende said:

Oct 30, 2015 8:50:42 GMT -8 Tumbleweed said:

I only posted about the avatar before it loads into the full width/height of the mp because the end results is cutting off the sides substantially, just like yours. Michael is indeed using an image and it is a rather large image (450x413 pixels) so the quality is likely better than the avatar maker, as you said. His original image shows the full width of the kids shoulders and then some extra space after that. So I guess what I'm saying is, you can expect to lose some of your image on the sides doing this unless you want to distort the image and no doubt the quality may be diminished if using the avatar maker so I really don't think there is a better way to do this.

But if you want the full width of the image but then distort to make the full height: It would be: 

.class here{
background-image:url(http://imagehere.png);
background-size: 170px 325px;
background-repeat: no-repeat;

without all this:

-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size:cover;
background-position:center top;

I thought that the webkit and whatnot was so it's compatible in other browsers. Thank you, though, Tumbleweed. I am going to stay with what I have now. I have re-created my MP to an extent that has helped me show my display name better, and that's mainly why I wanted to go to the pre-made example, but I wanted to put may avatar in it because that's what people know me as - the guy with glasses and a backpack, always wanting to learn new things.

Thanks so much for your help! If I want to change it in the future, I will keep this thread in mind.

Webkit is compatible and the webkit css I gave you works in all major browsers. I only said to remove it if you didn't like how it cuts off the sides and you want to try the full width instead with height stretched to fit rather than the cut off sides. Anyway, you have that option now.