Character Sheet Set-up

[Apollyon]

Okay, I have an ambitious idea for creating a character sheet--it is for me any ways, so no laughing! D;<
I would like to use this image as the main background:

However! I want a semi-transparent box where the actual CS descriptions would go, to fill the middle. I'd like to see the background even with the font, but make the font color have a background, say black on white, to it so it'll stand out.

Any way I can do this? If so, please use [c0de] so I can see exactly how it's done.

I would Also like:

At the top of the Text box
​

 

[firejay1]

I'm not ONE HUNDRED PERCENT CERTAIN, how you want everything to be, but a simple way to do the first part of what you're asking for is:

[div=background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); background-size: 100%;]

[CENTER][IMG]https://s-media-cache-ak0.pinimg.com/originals/a7/c6/45/a7c6451b563711e78aa98b56cdaa6d89.png[/IMG][/CENTER]

[div=margin: auto; width: 80%; background: black; opacity: 0.7; color: white; padding: 20px;]
lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf[/div]

[/div]

Make sure you space out your divs so they don't all squash up against each other. This is what the code will look like:

Spoiler

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf

The text will look normal size when not in spoilers, I promise. If you need to resize it, I can show you how to do that, too, and if you want to know what each element does, I can explain it to you, too.

 

[Apollyon]

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf

 

[Apollyon]

How do I keep it from repeating, and show the whole image?

 

[firejay1]

Background-size: 100%; should get it to not repeat width-wise. I THINK to get it to not repeat height wise repeat: none; should work? But that one I'm not sure about.

 

[Apollyon]

That's a DIV, right? What would that coding look like?

[div=
background 100%?

 

[firejay1]

Include it in the very first div. I edited my original post to include it.

[div=
background:url(linketc); background-size: 100%;
Finish bracket

 

[Apollyon]

[div=background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); background-size: 100%;]

[justify][IMG]https://i.imgur.com/er28ZO5.gif[/IMG][/justify]

[div=margin: auto; width: 90%; background: white; opacity: 0.7; color: black; padding: 40px;]

[center]lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf[/center][/div]

[/div]

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf​

 

[Apollyon]

I might need to shrink the image itself down, you think? @_@

 

[Apollyon]

Its 800 (W) by 541(H)

Would shrinking the image help any?

@firejay1

 

[firejay1]

It's better if you shrink the box, actually, since background-size: 100%; just makes the picture stretch to the size of your div box, which is usually set automatically at 100% width in the thread. You wanna do this:

[div=
background:url(lskdjfslkdjf); background-size: 100%; width: 60% or 500px or however big you want it;

The size of the original image doesn't matter if you do backgroundsize 100.

 

[Apollyon]

Also,@darkflames13 said:

@Tribulation Try setting the background-size of the div with the image to either cover or contain. Here's a reference to what values you can have on background-size and what they do [link]

To make it such that the background image doesn't repeat, just set background-repeat to no-repeat.

 

[Apollyon]

Well, shit, I forgot to paste my corrected thingy:

[code]
[div=background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); background-size: 90%;]

[justify][IMG]https://i.imgur.com/er28ZO5.gif[/IMG][/justify]

[div=margin: auto; width: 90%; background: lavender; opacity: 0.7; color: black; padding: 40px;]

[center]lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf[/center][/div]

[/div]

Preview

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf​

 

[Apollyon]

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf​

 

[Apollyon]

[div=background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); background-size: 600px;]

[div=margin: auto; width: 95%;  background:#C0C0C0; opacity: 0.7; color: black; padding: 10px;]

[CENTER][IMG]https://s-media-cache-ak0.pinimg.com/originals/60/83/4a/60834a93880ebb071d76e0a9026af5f7.gif[/IMG]

[shadow=#00ffff] lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf[/shadow][/CENTER]
[/div]

[/div]

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf​

​