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.

Find more posts tagged with

HTML

Developer

Accepted answers

cadellfalconer

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

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

All comments

n8isjack

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

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

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

I'm using a simple JPEG image

cadellfalconer

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

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>

img1.jpg

cadellfalconer

@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

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

MartinB

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

Thanks! I'll try to publish it later ?

cadellfalconer

@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

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

Thanks again.