Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Character Sheet Background Question

Hi. I am working on a Psi-Punk Campaign at the moment. There is good character sheet available so no issues there. I would however like to add a Matrix style background to the existing sheet. I am not particularly tech savvy and normally make changes to the roll20 sheets by a process of trial and error copy and pasting from other sheets which in the past has worked ok, until now. I have tried to add a background image to the sheet by adding CSS code with a imgur link to the image but it hasn't worked. Is there a line of code I can insert to display a background image? Many Thanks in advance for any help.
You are a mentor, so...copy and paste the code from Github into the custom area, and add the following to the css: .charsheet { background-image: url("<a href="http://images.alphacoders.com/551/5513.jpg" rel="nofollow">http://images.alphacoders.com/551/5513.jpg</a>"); }
Thank for your response. I had given this a try but with the Psi-Punk sheet adding the code to CSS as a custom sheet does not display the background for me. I am not sure why.
1433878206

Edited 1433878407
Coal Powered Puppet
Pro
Sheet Author
Okay, went back and looked at it. If you highlight everything from line 1 to line 23 and replace it with the following, it should work. .charsheet { background: url("<a href="http://images.alphacoders.com/551/5513.jpg" rel="nofollow">http://images.alphacoders.com/551/5513.jpg</a>"); color:white; } @font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; src: url('<a href="http://fonts.gstatic.com/s/audiowide/v3/yGcwRZB6VmoYhPUYT-mEow.ttf" rel="nofollow">http://fonts.gstatic.com/s/audiowide/v3/yGcwRZB6VmoYhPUYT-mEow.ttf</a>') format('truetype'); } h1 { color: white; border-bottom: 40px solid black; border-right: 15px solid transparent; height: 0; display: inline-block; font-family: 'Audiowide'; } label, label.sheet-primary-attribute { color:white; } label.sheet-secondary-attribute { color:white; } I'm not sure what "@import url( <a href="http://fonts.googleapis.com/css?family=Audiowide" rel="nofollow">http://fonts.googleapis.com/css?family=Audiowide</a>); " does, but it has no effect on my trial (I use Chrome). It was, however, what appeared to be messing with the background. Edit: I added the color:white to everything I could find so you can read the writing. Edit part 2: This is what I got from the above:
That is fantastic, exactly what I need. Thanks
1433890124
Kryx
Pro
Sheet Author
API Scripter
Coal Powered Puppet said: My eyes! Oy...
1433895308
Lithl
Pro
Sheet Author
API Scripter
Coal Powered Puppet said: I'm not sure what "@import url( <a href="http://fonts.googleapis.com/css?family=Audiowide" rel="nofollow">http://fonts.googleapis.com/css?family=Audiowide</a>); " does, but it has no effect on my trial (I use Chrome). It was, however, what appeared to be messing with the background. The @import rule imports CSS from another CSS file. The file that line is attempting to import is /* latin-ext */ @font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; src: local('Audiowide'), local('Audiowide-Regular'), url(<a href="http://fonts.gstatic.com/s/audiowide/v4/7pSgz2MbVvTCvvm7vukSHxJtnKITppOI_IvcXXDNrsc.woff2" rel="nofollow">http://fonts.gstatic.com/s/audiowide/v4/7pSgz2MbVvTCvvm7vukSHxJtnKITppOI_IvcXXDNrsc.woff2</a>) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; src: local('Audiowide'), local('Audiowide-Regular'), url(<a href="http://fonts.gstatic.com/s/audiowide/v4/8XtYtNKEyyZh481XVWfVOltXRa8TVwTICgirnJhmVJw.woff2" rel="nofollow">http://fonts.gstatic.com/s/audiowide/v4/8XtYtNKEyyZh481XVWfVOltXRa8TVwTICgirnJhmVJw.woff2</a>) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } I do not believe @import works correctly with the character sheet system, and I am unsurprised that it caused problems.
Mark said: My eyes! Oy... Hrm? Its what he/she/it asked for... Brain : Thanks for the clarification.