Background Image Custom App

Reply
Highlighted
Major Blue Belt

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.


Accepted Solutions
Yellow Belt

Re: Background Image Custom App

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!

----------------------------------------------
Solution Consultant, Domo - APAC.
Specialties: Custom Apps, Custom Connectors
LinkedIn: https://www.linkedin.com/in/cadell-falconer/

View solution in original post

Yellow Belt

Re: Background Image Custom App


@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 Smiley Happy


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.

----------------------------------------------
Solution Consultant, Domo - APAC.
Specialties: Custom Apps, Custom Connectors
LinkedIn: https://www.linkedin.com/in/cadell-falconer/

View solution in original post


All Replies
Major Blue Belt

Re: Background Image Custom App

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"
Major Blue Belt

Re: Background Image Custom App

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

 

 

Major Brown Belt

Re: Background Image Custom App

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.
 
 
Major Blue Belt

Re: Background Image Custom App

I'm using a simple JPEG image

Yellow Belt

Re: Background Image Custom App

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

----------------------------------------------
Solution Consultant, Domo - APAC.
Specialties: Custom Apps, Custom Connectors
LinkedIn: https://www.linkedin.com/in/cadell-falconer/
Major Blue Belt

Re: Background Image Custom App

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>
Yellow Belt

Re: Background Image Custom App


@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! :-)

----------------------------------------------
Solution Consultant, Domo - APAC.
Specialties: Custom Apps, Custom Connectors
LinkedIn: https://www.linkedin.com/in/cadell-falconer/
Major Blue Belt

Re: Background Image Custom App

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

Re: Background Image Custom App

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!

----------------------------------------------
Solution Consultant, Domo - APAC.
Specialties: Custom Apps, Custom Connectors
LinkedIn: https://www.linkedin.com/in/cadell-falconer/

View solution in original post

Announcements
Check out these great solution videos! The new iSolveditWithDomoboard is live, share yours and earn higher rankings in Dojo click here!