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.
Best Answers
-
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!Cadell Falconer
Principal Product Manager1 -
@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.
Cadell Falconer
Principal Product Manager1
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"1 -
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
0 -
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.0 -
I'm using a simple JPEG image
0 -
Can you share your code so that I can take a look and see if there is anything obvious that might be causing problems?
Cadell Falconer
Principal Product Manager0 -
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>0 -
@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! ?Cadell Falconer
Principal Product Manager0 -
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;
}
}
}0 -
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!Cadell Falconer
Principal Product Manager1 -
Why is this an issue in Domo?! Hahaha it works perfectly fine in my localhost!
Thanks! I'll try to publish it later ?
0 -
@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.
Cadell Falconer
Principal Product Manager1 -
Yes I'm in Windows. Gonna be more careful with what you explained.
Thanks again.
0
Categories
- All Categories
- 1.7K Product Ideas
- 1.7K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 295 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.8K Transform
- 97 SQL DataFlows
- 608 Datasets
- 2.1K Magic ETL
- 3.8K Visualize
- 2.4K Charting
- 710 Beast Mode
- 50 App Studio
- 39 Variables
- 668 Automate
- 170 Apps
- 446 APIs & Domo Developer
- 45 Workflows
- 7 DomoAI
- 33 Predict
- 13 Jupyter Workspaces
- 20 R & Python Tiles
- 391 Distribute
- 111 Domo Everywhere
- 274 Scheduled Reports
- 6 Software Integrations
- 116 Manage
- 113 Governance & Security
- Domo Community Gallery
- 31 Product Releases
- 9 Domo University
- 5.3K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 103 Community Announcements
- 4.8K Archive