Background Image Custom App

Hello Dojo Community

 

I created a custom app with HTML/CSS and uploaded to my Asset Library, but I have a problem

 

The index.html is supposed to load a background image (path defined in the css file). It loads perfectly fine in the dev instance but it doesn't work when published to Domo

 

Any ideas why?

 

Thanks in advance.

Tagged:

Best Answers

  • cadellfalconer
    Answer ✓

    Good news Martin!
    I've been able to both replicate your issue and resolve it! ?

    So, in your CSS you identify the image file as "img1.JPG" but the image you uploaded is "img1.jpg" - notice the capitalization difference of "jpg"?

    The image is 404ing when trying to find "img1.JPG" as it seems Domo is case sensitive for file extensions - but when I swapped your CSS to "img1.jpg" it was able to find it and deliver the background image successfully. ?

    Hope this helps - please let me know if you get it working too!

  • cadellfalconer
    Answer ✓

    @MartinB wrote:

    Why is this an issue in Domo?! Hahaha it works perfectly fine in my localhost!

     

    Thanks! I'll try to publish it later ?


    Are you dev-ing on a Windows machine? (I am, and it worked for me on my localhost too, just like you)

     

    While I cannot say for sure, one may speculate that it could be to do with a difference of operating system. Windows is not case senstive, while Linux is case senstive.... Just a guess!

     

    When I'm coding (regardless of if it's Domo related or not) I always err on the side of caution and assume the thing I'm doing is case sensitive.

Answers

  • Hard to say. It should work just fine. I think it is likely to do with the actual path.

     

    Is it a file that is part of your custom app, or is it external.

     

    If it is external:

    Is it a publicly accessible path?

    Must you be logged-in to see the image?


    **Say "Thanks" by clicking the "heart" in the post that helped you.
    **Please mark the post that solves your problem by clicking on "Accept as Solution"
  • Hello.

     

    It's not external, it is within my app directory under the img folder.

    It's referenced in the css and I tried it in the native HTML and it works fine in the dev instance but not in Domo

     

     

  • Hello,


    What image type are you trying to use? I was able to get this working using a PNG that was in the same root directory as the index.html, an using 


    <body background="thumbnail.png"> as the body tag in the HTML . It may work with other filetypes, but I have had the best luck using PNG within Domo.

     

     

  • I'm using a simple JPEG image

  • Can you share your code so that I can take a look and see if there is anything obvious that might be causing problems?

  • Here you go. Img is supposed to be in a folder but this forum won't allow me to upload compressed files. 

     

    This is my HTML code (apparently this formun won't also allow me to upload code files)

     

    <!DOCTYPE html>
    <html>
    <head>
    <title>CounterClock</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    </head>
    <body>
    <div>
    <h2>Currently, we have achieved</h2>
    <div id="clockdiv">
    <div id="yearsParent">
    <span class="years" id="years"></span>
    <div class="smalltext" id="yearsD"></div>
    </div>

    <div id="monthsParent">
    <span class="months" id="months"></span>
    <div class="smalltext" id="monthsD"></div>
    </div>

    <div id="daysParent">
    <span class="days" id="days"></span>
    <div class="smalltext" id="daysD"></div>
    </div>

    <div id="hoursParent">
    <span class="hours" id="hours"></span>
    <div class="smalltext" id="hoursD"></div>
    </div>

    <div id="minutesParent">
    <span class="minutes" id="minutes"></span>
    <div class="smalltext" id="minutesD"></div>
    </div>

    <div id="secondsParent">
    <span class="seconds" id="seconds"></span>
    <div class="smalltext" id="secondsD"></div>
    </div>
    </div>
    <h2>without accidents.</h2>
    <div id="record"></div>
    <div></div>
    </div>
    </body>
    </html>

  • @MartinB wrote:

    Here you go. Img is supposed to be in a folder but this forum won't allow me to upload compressed files. 

     

    This is my HTML code (apparently this formun won't also allow me to upload code files)

     

    <!DOCTYPE html>
    <html>
    <head>
    <title>CounterClock</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    </head>
    <body>
    <div>
    <h2>Currently, we have achieved</h2>
    <div id="clockdiv">
    <div id="yearsParent">
    <span class="years" id="years"></span>
    <div class="smalltext" id="yearsD"></div>
    </div>

    <div id="monthsParent">
    <span class="months" id="months"></span>
    <div class="smalltext" id="monthsD"></div>
    </div>

    <div id="daysParent">
    <span class="days" id="days"></span>
    <div class="smalltext" id="daysD"></div>
    </div>

    <div id="hoursParent">
    <span class="hours" id="hours"></span>
    <div class="smalltext" id="hoursD"></div>
    </div>

    <div id="minutesParent">
    <span class="minutes" id="minutes"></span>
    <div class="smalltext" id="minutesD"></div>
    </div>

    <div id="secondsParent">
    <span class="seconds" id="seconds"></span>
    <div class="smalltext" id="secondsD"></div>
    </div>
    </div>
    <h2>without accidents.</h2>
    <div id="record"></div>
    <div></div>
    </div>
    </body>
    </html>

    Thanks Martin.


    Can you share your CSS with me too?
    Once you share that, if there is nothing obvious I see, I'll then recreate your app on my end and investigate a bit to see if I can help! ?

  • Adding css code

     

    body{
    text-align: center;
    font-family: sans-serif;
    font-weight: bolder;
    background: url("../img/img1.JPG");
    background-size: cover;
    background-repeat: no-repeat;
    }
    h2{
    font-size: 5vw;
    font-family: "Trebuchet MS";
    color: rgb(255, 255, 255);
    font-style: italic;
    line-height: 20%;
    z-index: 1;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 2px #CC0E0E;
    padding: 0.15em;
    }

    #clockdiv{
    font-family: sans-serif;
    color: #e6e7e8;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    font-size: 2.0vw;
    padding-top: 8px;
    }

    #clockdiv > div{
    padding: 1.5vw;/*Si se elimina, tiene efecto distinto*/
    border-radius: 2vw;
    background: #E75D5D;
    display: inline-block;
    opacity: 0.8;
    }

    #clockdiv div > span{
    padding: 1.5vw;/*Si se elimina, tiene efecto distinto*/
    border-radius: 2.0vw;/*3px;*/
    background: #EE0D0D;
    display: inline-block;
    }

    .smalltext{
    padding-top: 5px;
    font-size: 2.0vw;
    }

    #record, #prevDate{
    padding: 2.0vw;
    border-radius: 3px;
    background: #E75D5D;
    display: inline-block;
    font-family: sans-serif;
    color: #fff;
    font-weight: 200;
    text-align: center;
    font-size: 2.0vw;
    opacity: 0.8;
    }

    @media only screen and (max-width: 360px) {
    #end{
    padding-bottom: 24.5vw;
    }
    #clockdiv > div{
    padding: 1.5vw;
    }
    #clockdiv div > span{
    padding: 1.5vw;
    }
    .smalltext{
    font-size: 9px;
    }
    #clockdiv{
    font-size: 9px;
    }
    h2{
    font-size: 5vw;
    -webkit-text-fill-color: red;
    -webkit-text-stroke: white;
    }
    #record{
    font-size: 9px;
    }
    }

    @media only screen and (max-width: 680px) and (min-width: 361px){
    #end{
    padding-bottom: 24.5vw;
    }
    #clockdiv > div{
    padding: 1.5vw;
    }
    #clockdiv div > span{
    padding: 1.5vw;
    }
    .smalltext{
    font-size: 12px;
    }
    #clockdiv{
    font-size: 12px;
    }
    h2{
    font-size: 5vw;
    -webkit-text-fill-color: red;
    -webkit-text-stroke: white;
    }
    #record{
    font-size: 12px;
    }
    }
    }
  • Why is this an issue in Domo?! Hahaha it works perfectly fine in my localhost!

     

    Thanks! I'll try to publish it later ?

  • Yes I'm in Windows. Gonna be more careful with what you explained.

     

    Thanks again.

This discussion has been closed.