GRAPHICS REQUEST Character Sheet Set-up

Discussion in 'MEDIA SHOPS & REQUESTS' started by Kross, Aug 5, 2017.

  1. 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:

    [​IMG]

    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:

    [​IMG]

    At the top of the Text box
     
    #1 Kross, Aug 5, 2017
    Last edited: Aug 5, 2017
  2. 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:

    Code:
    [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:

    Show Spoiler



    [​IMG]


    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.
     
    #2 firejay1, Aug 5, 2017
    Last edited: Aug 5, 2017
    • Love Love x 1




  3. [​IMG]

    lsdjflksajdflksjdf;ijasoflasjfdlksjdf
    sf;djalsjdflkajsdflas
    df[a;sjdfikasdflsjkdf
     
  4. How do I keep it from repeating, and show the whole image?
     
  5. 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.
     
  6. That's a DIV, right? What would that coding look like?

    [div=
    background 100%?
     
  7. Include it in the very first div. I edited my original post to include it.

    [div=
    background:url(linketc); background-size: 100%;
    Finish bracket
     
  8. Code:
    [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]



    [​IMG]


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


     
    #8 Kross, Aug 5, 2017
    Last edited: Aug 5, 2017
  9. I might need to shrink the image itself down, you think? @_@
     
  10. Its 800 (W) by 541(H)

    Would shrinking the image help any?

    @firejay1
     
  11. 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.
     
  12. Also,@darkflames13 said:

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

    Code:
    [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 (open)


    [​IMG]


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


     




  14. [​IMG]

    lsdjflksajdflksjdf;ijasoflasjfdlksjdf
    sf;djalsjdflkajsdflas
    df[a;sjdfikasdflsjkdf


     
  15. Code:
    [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]




    [​IMG]

    lsdjflksajdflksjdf;ijasoflasjfdlksjdf
    sf;djalsjdflkajsdflas
    df[a;sjdfikasdflsjkdf



     
    #15 Kross, Aug 6, 2017
    Last edited: Aug 6, 2017