did you check the filerights from the png file? because you did it the right way.
rereading i think i can think of something else:
the - sign in the name could cause the trouble.
I’m not sure how to check file properties using Hassio.
I tried saving a new picture in the img/ folder with a basic name, “blue.png” but that didn’t work either.
i am pretty sure that it is a fileright situation.
the program you used to copy the file probably has given the file other properties then needed.
but i dont know hassio well enough (actually i dont now very much about hassio) to tell you how to set filerights.
it might be wise to open a new topic in the hassio section to ask, how you can change filerights. (after searching the forum, if there isnt such a topic already)
I will try that, thanks for your help and suggestions.
I updated hass to the latest version and the background “blue” worked, but then I tried changing it to the “gradient-background-_edited.png” background and it didn’t work. I tried reverting back to “blue” but it doesn’t work either, only that first time after updating.
are you tying to change the background from HAdashboard or from hass?
if your talking about dashboard:
when changes dont take effect, but it did after a restart then probably you need to put “dash_force_compile: 1”
in your appdaemon.yaml
or you can have a cashing problem in your browser.
Unfortunately that did not work either. I also cleared the cache and tried different browsers on phone and computer.
did you restart appdaemon after you changed the appdaemon.yaml?
and did you put “dash_force_compile: 1” on the right place? (in the hadashboard section)
Yes I restart appdaemon, hass, and cleared the cache in my browser.
Here’s my appdaemon.yaml
log:
logfile: /config/appdaemon/appdaemon.log
errorfile: /config/appdaemon/error.log
appdaemon:
threads: 10
app_dir: /config/appdaemon/apps
plugins:
HASS:
type: hass
ha_url: https://xxxxxxxxx.duckdns.org:8123
ha_key: secret
hadashboard:
dash_url: http://192.168.0.196:5050
dash_dir: /config/appdaemon/dashboards
dash_password: secrett
dash_force_compile: 1
dash_compile_on_start: 1do other changes in the css file take effect?
Yes I believe so, when I change the skin the colours and font do change as per the css.
Default Skin
Dark1 Skin
did you find out if the filerights are set correctly?
because i think that can be the only cause.
Does anyone have any ideas? Background still not showing up on latest HASS and latest appdaemon.
Move these two lines to the body section instead of the body::after section:
background-image: url(/custom_css/dark1/img/gradient-background-_edited.png);
background-size:cover;
That seemed to fix it for me.
Can you post your entire dashboard.css?
I tried your suggestion and it still doesn’t work for me.
html {
font-size:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
padding:0;
}
body {
margin:0;
background-color: #000;
background-image: url(/custom_css/dark1/img/gradient-background-_edited.png);
background-size:cover;
font-size:12px;
color:#ffffff;
padding:0;
font-family:‘Helvetica Neue’,‘Helvetica’,‘Open Sans’,‘Arial’;
}
body::after
{
background-image: url(/custom_css/dark1/img/gradient-background-_edited.png);
/* background: #000;
background-image:
-webkit-radial-gradient(80% 10%, circle, #4d6776, transparent),
-webkit-radial-gradient(80% 50%, circle, #27282a, transparent),
-webkit-radial-gradient(20% 80%, 40em 40em, #161d23, transparent),
-webkit-radial-gradient(10% 10%, circle, #212d3d, transparent); */
background-size:cover;
content: “”;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
b,strong {
font-weight:700;
}
a {
text-decoration:none;
color:inherit;
}
img {
border:0;
-ms-interpolation-mode:bicubic;
vertical-align:middle;
}
img,object {
max-width:100%;
}
iframe {
max-width:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
width:100%;
}
td {
vertical-align:middle;
}
ul,ol {
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, p {
padding:0;
margin:0;
}
h1 {
margin-bottom:6px;
text-align:center;
font-size:100%;
font-weight:200;
}
h2 {
font-size:220%;
font-weight:400;
/ color:#646464;
}
h3 {
font-size:125%;
font-weight:300;
color:#646464;
}
.dashboard_main {
margin: 0px auto;
}
.gridster {
margin: 0px auto;
}
.icon-background {
pointer-events:none;
width:100%!important;
height:100%;
position:absolute;
left:0;
top:0;
opacity:.1;
font-size:1375%;
text-align:center;
margin-top:82px;
}
.list-nostyle {
list-style:none;
}
.gridster ul {
list-style:none;
}
.gs-w {
width:100%;
display:table;
cursor:pointer;
z-index: auto !important;
}
.widget {
padding:0px 0px;
text-align:center;
width:100%;
display:table-cell;
vertical-align:middle;
/*border-radius: 12px; */
background-color: rgba(0, 0, 0, 0.5);
/*background-color: #161d23; */
}
.title
{
color:#646464;
z-index: 1;
/*background-color: rgba(255, 255, 255, 0.2);
margin-top: -5px;
height: 35px;
padding-top: 5px;
padding-bottom: 6px; */
}
.title2
{
z-index: 2;
margin-top: 0;
}
.icon-inactive {
color:#888;
font-size:300%;
top: 54px !important;
}
.icon-active {
font-size:300%;
top: 54px !important;
}
.icon
{
font-size: 300%;
/* top: 56px !important; */
}
#container {
padding-top:0px;
}
.unit, .level {
font-size:120%!important;
vertical-align:baseline!important;
color: #646464 !important;
}
.value
{
color: inherit;
}
.valueunit
{
/*top: 62px !important; */
}
.state_text
{
/* bottom: -3px !important; */
text-transform: capitalize;
}
.levelunit
{
bottom: 0px !important;
}
.secondary-info
{
font-weight: 400 !important;
}
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 9999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialogOpen {
opacity:0.95;
pointer-events: auto;
}
.modalDialogClose {
opacity:0;
pointer-events: none;
}
.modalDialog > div {
width: 275px;
position: relative;
margin: 3% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
}
.modalDialogCloseButton {
line-height: 50px;
position: absolute;
right: -25px;
text-align: center;
top: -20px;
width: 50px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.modalDialogCloseButton:hover { background: #222; }
at the top of the forum you find this link
please use it when you share code and or yaml, it makes reading for other easier, or even possible 
Never mind, I got it going. It turned out that I had to restart appdaemon. I figured that if I restart HA, it will also restart appdaemon, but that did not help. Only when I restart appdaemon the background image changed
Hello,
Can you give me some example of how u get the whole background thing to work ?
I am a beginner.
Thank you so much in advance !
to change a background you need a custom skin:
https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skin-development
then you need to have the background file on a place where dashboard can find it.
i use /custom_css/images for that.
then you can use that in your css file pointing to /custom_css/images/yourimage.jpg