Background Image Custom App

MartinB · September 2019

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.

cadellfalconer · October 2019

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 · October 2019

@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.

n8isjack · September 2019

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?

MartinB · September 2019

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

Jarvis · September 2019

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.

MartinB · September 2019

I'm using a simple JPEG image

cadellfalconer · September 2019

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

MartinB · September 2019

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>

cadellfalconer · October 2019

@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! ?

MartinB · October 2019

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;
          }
        }
        }

cadellfalconer · October 2019

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!

MartinB · October 2019

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

Thanks! I'll try to publish it later ?

cadellfalconer · October 2019

@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.

MartinB · October 2019

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

Thanks again.

Background Image Custom App

Best Answers

Answers

Categories