• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Closed Image Position

I do have a quick question about image positioning.... Whenever I use the border-radius code, you can shift the position of the image through the "background-position: x% x%;", however, no matter how I adjust the percents nothing ever happens with the picture... So, when I do use certain pictures, I might want to shift them left, because I know there's more image there, so to speak, and it would fill the ugly gap of white at the end... However, it never seems to cooperate with me? I've tried to use "px" as well instead of percent, but that hasn't done anything either... :s

ac2076734add8bc2a4592f56712cabab.jpg


Do you see the problem? Aha ^^;

This would be the code for reference:

Code:
[div=float:center;background-color:white; margin: auto;background-position: 50% 30%;border-radius: 50%;border: 2px solid #E5E8E8;height:95px;width: 95px;overflow:hidden; margin-bottom: 15px;][heightrestrict=150][img]https://i.pinimg.com/564x/ac/20/76/ac2076734add8bc2a4592f56712cabab.jpg[/img][/heightrestrict][/div]

Any help would be greatly appreciated *^*

I suppose this was a bad example because i could just up the height restrict, but it's happened for a lot of other pictures as well, not just this one...

This would be a better example:

3A49D685BA126B4211B7B1C244772E86D9231C11
maxresdefault.jpg


Code:
[div=float:left; background-color:white; margin: auto;background-position: right 0px bottom 20 px; border-radius: 30%;border: 2px solid #E5E8E8;height:310px;width: 290px;overflow:hidden; margin-bottom: 15px;][IMG]http://cloud-3.steamusercontent.com/ugc/155778251309311258/3A49D685BA126B4211B7B1C244772E86D9231C11/[/IMG][IMG]https://i.ytimg.com/vi/23GNTrB69ME/maxresdefault.jpg[/IMG][/div]

See how I slipped a second picture in there to hide the ugly white gap? ^^; Is it just the image being too small?
 
You have to specify the image as a background-image for background-position will work. You can combine the two properties into one. To make the image the correct size, you'll have to use background-size:cover. Also, float:center doesn't do anything - it's the margin:auto that centers the div.



Code:
[div=margin: auto; background: url(https://i.pinimg.com/564x/ac/20/76/ac2076734add8bc2a4592f56712cabab.jpg) 50% 30%; background-size: cover; border-radius: 50%; border: 2px solid #E5E8E8; height: 95px; width: 95px;][/div]

More on backgrounds
And background-size
 

Users who are viewing this thread

Back
Top