• 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.

Tutorial BBCode Assistance Thread

DaughterofAthena said:
New question... how do I get the image to sit in the center of it's column? It keeps hugging the left side and I want it to be centered in that space, not closer to the left than the right. I thought margin:auto did that, but it isn't working.

Astrid Ceral
91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.
Code: 
[centerblock=93][div=background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat; background-size:cover; padding:10px; border:4px solid #BFBFBF;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]

[row][column=span3][div=border-color:#BFBFBF; overflow-x:hidden; overflow-y:hidden; margin:auto;][heightrestrict=300][img]https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg[/img][/heightrestrict][/div][/column]
[column=span5][div=background-color:#262D25; color:#BFBFBF; border:2px solid #4E534D; padding:5px; margin:auto; opacity:0.8;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/column][/row][/div][/centerblock]
Click to expand...
Thats because the margin:auto tag and parameter only works with the div itself, not its content.

Astrid Ceral
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

Code: 
[centerblock=93][div=background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat; background-size:cover; padding:10px; border:4px solid #BFBFBF;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]

[row][column=span3][div=border-color:#BFBFBF; overflow-x:hidden; overflow-y:hidden; margin:auto; background: url(https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg); color: transparent; height: 500px; width: 400px; background-size: 400px;].[/div][/column]
[column=span5][div=background-color:#262D25; color:#BFBFBF; border:2px solid #4E534D; padding:5px; margin:auto; opacity:0.8; height: 486px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/column][/row][/div][/centerblock]
 
StoneWolf18 said:
Thats because the margin:auto tag and parameter only works with the div itself, not its content.

Astrid Ceral
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

Code: 
[centerblock=93][div=background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat; background-size:cover; padding:10px; border:4px solid #BFBFBF;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]

[row][column=span3][div=border-color:#BFBFBF; overflow-x:hidden; overflow-y:hidden; margin:auto; background: url(https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg); color: transparent; height: 500px; width: 400px; background-size: 400px;].[/div][/column]
[column=span5][div=background-color:#262D25; color:#BFBFBF; border:2px solid #4E534D; padding:5px; margin:auto; opacity:0.8; height: 486px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/column][/row][/div][/centerblock]
Click to expand...
I don't want the image and the text box touching. I want there to be a comfortable space between the two of them with the picture in the center of it's column and the text box in the center of it's column.
 
Uhm, the boxes are not touching for me.Screenshot_48.png
 
Honestly, the easiest way to do it is not use the column/row coding and focus on [div=float: left;][/div] and [div=padding-left: your fucking pixels;][/div] in order to get the spacing between two elements. I have pasted an example on the previous page. It helps to have resized/cropped the desired image from a free image editing site in order to be precise in how much space you want between the image and the text element.
 
Alibaba said:
Honestly, the easiest way to do it is not use the column/row coding and focus on [div=float: left;][/div] and [div=padding-left: your fucking pixels;][/div] in order to get the spacing between two elements. I have pasted an example on the previous page. It helps to have resized/cropped the desired image from a free image editing site in order to be precise in how much space you want between the image and the text element.
Click to expand...
DaughterofAthena said:
I don't know how! That's why I'm here. If I knew how to format it myself, I wouldn't be asking for help.
Click to expand...
Or just resizing the image within the div works as well. Just edit the width and height of the div boxes.
 
DaughterofAthena said:
I don't know how! That's why I'm here. If I knew how to format it myself, I wouldn't be asking for help.
Click to expand...
We are trying to help you, due to our different resolution sizes though we aren't sure what exactly you will see with solutions that appear to work for us. Learning to code takes patience and time and a ton of experimenting along with massive trial and error. :\

There are some areas of your code I don't understand the purpose of (such as why you are setting the overflow to hidden). To help you learn, we would have to start from scratch on the code most likely to see what is going on and where.
 
Fyuri said:
There are some areas of your code I don't understand the purpose of (such as why you are setting the overflow to hidden). To help you learn, we would have to start from scratch on the code most likely to see what is going on and where.
Click to expand...
At one point, I had a border radius on that particular div box and wanted the image inside to be rounded on the edges. Then I decided that that was too complicated and was screwing too many things up, so I took out the border radius and never got around to removing the overflow.
 
StoneWolf18 StoneWolf18
I don't resize the image itself through div just because you can face other problems down the road. But, that's just me personally because the way I code. Like the taxidermy cat example. I am able to give a 10px space between the text and image because I know that the width of the image is 207px. So... with padding-left, I input it as 217px, and, BOOM! I got my 10px space.
 
Well, I made something work. Is there any way, without changing too much of the coding that I have here (which works on my screen and which I actually understand) that I can put a border around the image?

Astrid Ceral
91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.
Code: 
[centerblock=93][div=background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat; background-size:cover; padding:10px; border:4px solid #BFBFBF;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]

[row][column=span3][center][heightrestrict=350][img]https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg[/img][/heightrestrict][/center][/column]
[column=span5][centerblock=90][div=background-color:#bfbfbf; color:#262D25; border:2px solid #4E534D; padding:5px; margin:auto; opacity:0.6;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/centerblock][/column][/row][/div][/centerblock]
 
Alibaba said:
It helps to know the exact size of the image in order to have the border wrap around the image. In this case, I went to Pic Monkey (free site) to shrink the image down to 317px x 450px so I add height and width around the image with a div box so the border coding will work. I am not sure how center you'd want the image, so that can be adjusted through the padding coding I did. I also added a height size for the text box since it helps keep the background the same size constantly (and with the image float i used for the character image). I also through in the overflow-y coding since this seemed like a posting format. The coding is included in this post to play around with.


2roYibw.png
Astrid Ceral
butts


[centerblock=93][div=
background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat;
background-size: cover;
padding: 10px;
border: 4px solid #BFBFBF;]
[div=
padding-left: 20px;][div=
float: left;][div=
width: 317px;
height: 450px;
border: 1px solid #BFBFBF;][img]https://imgur.com/2roYibw.png[/img][/div][/div][/div][div=
padding-left: 327px;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]
[centerblock=90][div=
background-color: #bfbfbf;
color: #262D25;
border: 2px solid #4E534D;
padding:5px;
margin: auto;
opacity: 0.6;
height: 390px;
overflow-y: scroll;]butts[/div][/centerblock][/div]
[/div][/centerblock]
Click to expand...
The header was meant to be centered over the whole thing... not just over the box with the text itself. In what I'm seeing, now the character's name is just over the text box and that isn't even something I was ever trying to change.
 
There are three open divs at one point? I really am not that familiar with divs which is why I was trying to avoid them in the first place. I don't understand how to align div boxes at all, I have absolutely zero sense of pixel size of anything at all and I really was not hoping to go in the direction of turning everything into a div. Now I do not understand a single thing that is going on in the coding.

I can't figure it out from here. You've changed so much that I have no clue what is going on in the coding anymore. I understand the first div and after that, you've lost me completely.
 
DaughterofAthena said:
There are three open divs at one point? I really am not that familiar with divs which is why I was trying to avoid them in the first place. I don't understand how to align div boxes at all, I have absolutely zero sense of pixel size of anything at all and I really was not hoping to go in the direction of turning everything into a div. Now I do not understand a single thing that is going on in the coding.

I can't figure it out from here. You've changed so much that I have no clue what is going on in the coding anymore. I understand the first div and after that, you've lost me completely.
Click to expand...

I've copied your code from above and added Lyro's border code to it. Is this what you wanted?

Astrid Ceral
91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.
[centerblock=93][div=background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat; background-size:cover; padding:10px; border:4px solid #BFBFBF;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]

[row][column=span3][center][heightrestrict=350][div=display: inline-block; border: solid 2px #4E534D; line-height: 0;][img]https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg[/img][/div][/heightrestrict][/center][/column]
[column=span5][centerblock=90][div=background-color:#bfbfbf; color:#262D25; border:2px solid #4E534D; padding:5px; margin:0 auto; opacity:0.6;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/centerblock][/column][/row][/div][/centerblock]

Whoah, wait, something went wrong. Hold on.
 
OKAY. So.
Astrid Ceral
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.
[centerblock=93][div=background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat; background-size:cover; padding:10px; border:4px solid #BFBFBF;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]

[row][column=span3][div=background: url(https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg) no-repeat; background-size: cover; border: solid 2px #4E534D; height: 350px; width: 246px; margin: 0 auto;][/div][/column]
[column=span5][centerblock=90][div=background-color:#bfbfbf; color:#262D25; border:2px solid #4E534D; padding:5px; margin:auto; opacity:0.6;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/centerblock][/column][/row][/div][/centerblock]

What I've done is remove the [center], [heightrestrict] and [img] tags and replace them with a div - specifically, this:

Code: 
[div=background: url(https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg) no-repeat; background-size: cover; border: solid 2px #4E534D; height: 350px; width: 246px; margin: 0 auto;][/div]
To break it down:
  • background:...; and background-size: cover; Makes the image a background that fully covers the div, like you did with the big background.
  • border: solid 2px #4E534D; adds the border.
  • height: 350px; sets the height to 350px, which is what you wanted.
  • width: 246px; sets the width to 246px, which is roughly how wide the image would have been if it had kept its proportions.
  • margin: 0 auto; centers the div.
Hope that works for you.
 
Last edited:
IctoraPost said:
OKAY. So.
Astrid Ceral
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.
[centerblock=93][div=background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat; background-size:cover; padding:10px; border:4px solid #BFBFBF;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]

[row][column=span3][div=background: url(https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg) no-repeat; background-size: cover; border: solid 2px #4E534D; height: 350px; width: 246px; margin: 0 auto;][/div][/column]
[column=span5][centerblock=90][div=background-color:#bfbfbf; color:#262D25; border:2px solid #4E534D; padding:5px; margin:auto; opacity:0.6;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/centerblock][/column][/row][/div][/centerblock]

What I've done is remove the [center], [heightrestrict] and [img] tags and replace them with a div - specifically, this:

Code: 
[div=background: url(https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg) no-repeat; background-size: cover; border: solid 2px #4E534D; height: 350px; width: 246px; margin: 0 auto;][/div]
To break it down:
  • background:...; and background-size: cover; Makes the image a background that fully covers the div, like you did with the big background.
  • border: solid 2px #4E534D; adds the border.
  • height: 350px; sets the height to 350px, which is what you wanted.
  • width: 246px; sets the width to 246px, which is roughly how wide the image would have been if it had kept its proportions.
  • margin: 0 auto; centers the div.
Hope that works for you.
Click to expand...
Thank you for explaining things. That is helpful.

A question I have in case I need to do something like this in the future... how do you know what width is appropriate for the height of the image? How can that be figured out?
 
There are a few ways you can do this.

What I did in this instance was resize the image using heightrestrict (by the way, heightrestrict makes the image 22px less than what you specify, so if you want a 350px tall image, you'll have to put in 372 on the heightrestrict), then use the inspect tool to find the width.

Another way to do it is to download the image, open it in Paint (if you're using Windows), resize it to the height you want, then look at the width.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

silverwhere
Help Easy way to edit the Scroll Bar
Replies
2
Views
169
azariel
azariel
Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
109
A Murder Of Corviknight
A Murder Of Corviknight
mizton
Help quote bubble codes?
Replies
1
Views
133
Uxie
Uxie
roxybirdie
Closed music player button [resolved]
Replies
2
Views
373
roxybirdie
roxybirdie
JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
48
JCKane
JCKane
Back
Top