I have published an android Chromecast app. My receiver app is using the default receiver. Now I'm trying to customize the receiver using a css.
I followed the developper guide (https://developers.google.com/cast/docs/styled_receiver) and I tried to host this css file on my drive account as it's explained here https://support.google.com/drive/answer/2881970?hl=en
But something must be wrong because after having updated my receiver app with the CSS url and restarted my chromecast I don't see any modification. I guess the way I shared the drive hosted css file must be wrong.
Here's my css :
.logo {
background-image: url(logo.png);
}
.progressBar {
background-color: rgb(244, 132, 45);
}
.watermark {
background-image: url(watermark.png);
background-size: 57px 57px;
}
both images have also been shared publicly.
BTW looking at Google documentation, it looks like there should be a preview button in the chromecast console, but I don't see it.
Any idea what's going on ?
I finally got it to work.
The default url when sharing the css file was
https://drive.google.com/file/d/XXXXXXXXXX/edit?usp=sharing
In fact I just needed to change it into
https://googledrive.com/host/XXXXXXXXXX
To make it work
Then in my css file I had to change both logo.png and watermark.png into absolute url, both hosted on drive in my case so i had to use their shared url (https://googledrive.com/host/yyy)
Related
How to access images that are one folder above. The background-image does not appear in the html because of wrong directory or reference.
background-image:url("imgs/hours.png");
#schedules{
float: left;
margin-left:10%;
background-image: url(file:///C|/wamp/www/web/crosscafe/imgs/hours.png);
}
span {
font-weight:bold;
}
As said before, and just to make sure, if you're using WAMP you need to access the webpage through the localhost or any address that was provided for that purpose. Accessing through file:// normally ignores most of the server-side usage WAMP provides you with.
That being said, I think your problem is fairly simple. If you are using a framework file structure you probably have the following strcture:
imgs/
css/
js/
index.html
So, and since you're working on your CSS which is in the css subfolder, your URL needs to be the following:
background-image:url("../imgs/hours.png");
The two points (../) tell the browser to go to the parent folder, then into the imgs folder and then search for hours.png.
First of all, you should only comment css using /* and */. // in css will not be treated as comment at all.
For your problem, you should use firebug to make sure that your element which id is schedules have a appropriate height and width.
And, if you are using WAMP, access your website from a URL start with http://, that page could not display a image stored on your local side, I mean, via file://. This is prohibited by your broswer. You should use the relative path instead, and the relative path is start from your css file.
So you can try this:
#schedules{
float: left;
margin-left:10%;
background-image: url(imgs/hours.png);
height: 100px;
width: 100px;
}
and save "imgs" near your css file.
If you still have problems, I think you should paste your HTML on.
If you try to display an image from that imgs directory in other place in your website, does it is shows? If not, it can be your .htaccess file. It might be blocking the access to your images dir.
Context:
http://getcassette.net/documentation/stylesheets
Specifically:
Image URLs in the CSS are rewritten. For example, a file
~/styles/main.css, with the content:
body { background-image: url(img/bg.jpg); }
is transformed into:
body { background-image: url(/_assets/images/styles/img/bg_25cb72e61bd5ag2_jpg);
Now in my particular case for example, in my .less file, I might have a rule like this:
.ribbon {
background: url("/Public/image/blue-rib.png") no-repeat;
}
And Cassette is supposed to rewrite it and the browser actually receives this rule:
.ribbon {
background: url("/_cassette/file/Public/images/blue-rib_81ab1e7f2fdb27c91a9e9b41eed420390e21f7e0.png") no-repeat;
}
And the image displays fine.
In this particular case, using the same idea, the background rule is not rewritten by cassette and the users receives the regular rule I manually entered in the .less file.
Here are the facts:
The working and non-working rules are both in the same .less file.
The image is correctly in my Visual Studio project, in a folder /Public/images.
Using the Google Chrome web tool, I can see the rule is background: url("/Public/image/blue-rib.png") no-repeat; - Not rewritten as it should be by Cassette.
Any ideas on what might the cause of this?
I tried changing to debug=false in web.config, running the app and nothing works.
Tried switching back to debug=true and still no dice.
Any suggestions?
Do the images exist on disk? Cassette skips images it can't find.
Also, does switching to CSS relative URLs work?
Okay so I have a simple HTML Input fragment:
<input id="txtFirstName" type="text" class="txtBox" runat="server" />
Which is hooked up to this CSS property:
.txtBox
{
background: url("/Images/lu/input_bg.png") repeat-x scroll left bottom transparent;
border: 1px solid #E0E6EF;
padding: 3px;
width: 275px;
}
The image shows up in Visual Studios design window, but not when I view it in a browser. What gives?
Often, when you develop locally, Visual Studio will host the site at http://localhost:port - this is the default when using the inbuilt web server for web application and web site projects.
When you deploy to your remote site, it may be in a virtual directory that is not the root site; so, in fact, your remote application URL will be something like http://yourdomain.ext/your_site/ which changes the paths for images. The solution is to either include the virtual directory name in your path (/your_site/images/image.jpg) or use relative paths.
I prefer the former as it keeps all paths consistent, and it is possible to simulate this locally in Visual Studio.
For Web Application Projects see Solution Properties (Right click the solution node in the Solution Explorer and choose properties) - Web (tab on the left) - and look for the Virtual Path text box and change as appropriate (e.g. from '/' to '/your_site')
For Web Site Projects, click the Solution node in the Solution Explorer and look at the Properties dialog. The last option is a Virtual Path.
Try updating the url.
background: url("./Images/lu/input_bg.png") repeat-x scroll left bottom transparent;
Check your pathname on the server. Can you access the image at yoursite.com/Images/lu/input_bg.png? Is it really Images and not images?
I had same problem. My image did not show up on the browser And then I solved it.
I added two dot begining of my image path like this
<img src="../Images/icon48x48.png" alt="myLogo" width="48" height="48" />
You can also clear your browser's cache. I had an issue where I was setting the background of a DIV using css file, and the image would only show up in firefox or IE. After I cleared chrome's cache and restarted the site, the images appeared.
If my Image is located: mysite/App_Themes/Image
and my CSS file is within App_themes reference like this: Image/myfile.css
I have created a basic MVC3 site and have added image paths into the site.css file (part of the original template).
When I run the application through dev studio the site looks OK and the images are displayed.
When I build my installer and deploy the site onto my server the images aren't displayed.
Here is a sample of my css file:
#CustomerLogo
{
position: relative;
margin-left:auto;
margin-right: auto;
width: 300px;
height: 96px;
background-image: url(/Content/themes/base/images/CustomerLogo.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: rgb(41,139,178);
}
Besides ensuring that the images are actually loaded on the server, you may want to check whether the application on the server is actually running at the root directory /. For example, if your site is located at facebook.com/myGreatApp by prefixing your url with / you are telling the browser to look for images at facebook.com/Content/... which is the root rather than at facebook.com/myGreatApp/Content/...
As some other posters have mentioned, the fix for this would be to determine what the actual path from your css to those images is and to use that. A relative path would serve this perfectly and which relative option to use depends on where the css is located in relationship to the images.
Seems like issue with deploying your site to virtual directory. Anyways, you should include images relative to css file, not to application. Try
background-image: url(themes/base/images/CustomerLogo.jpg);
Have you tried a relative path? Assuming your css file resides in ~/Content/themes/base, this should work:
background-image: url(images/CustomerLogo.jpg);
You may need a .. to assist in finding the Content folder,
Example:
background-image: url(../Content/themes/base/images/CustomerLogo.jpg);
Are you sure that the URL is working? If you try to access the URL directly through the address bar, do you see the image?
I'm trying to use background image in CSS but even though I gave the full path of the image, it doesn't work. Firebug shows "Failed to load given URL".
I'm sure that there is no permission problem in that folder.
My CSS class is
body {
background: url("H:/media/css/static/img/sprites/buttons-v3-10.png") repeat-x scroll left -800px #DCDCDC;
color: black;
font: 13px/1.2em arial,helvetica,clean,sans-serif;
height: 100%;
position: relative;
}
What could be causing the issue?
You are using a local path. Is that really what you want? If it is, you need to use the file:/// prefix:
file:///H:/media/css/static/img/sprites/buttons-v3-10.png
obviously, this will work only on your local computer.
Also, in many modern browsers, this works only if the page itself is also on a local file path. Addressing local files from remote (http://, https://) pages has been widely disabled due to security reasons.
I know this is really old, but I'm posting my solution anyways since google finds this thread.
background-image: url('./imagefolder/image.jpg');
That is what I do. Two dots means drill back one directory closer to root ".." while one "." should mean start where you are at as if it were root. I was having similar issues but adding that fixed it for me. You can even leave the "." in it when uploading to your host because it should work fine so long as your directory setup is exactly the same.
Source location should be the URL (relative to the css file or full web location), not a file system full path, for example:
background: url("http://localhost/media/css/static/img/sprites/buttons-v3-10.png");
background: url("static/img/sprites/buttons-v3-10.png");
Alternatively, you can try to use file:/// protocol prefix.
source URL for image can be a URL on a website like http://www.google.co.il/images/srpr/nav_logo73.png or https://https.openbsd.org/images/tshirt-26_front.gif or if you want to use a local file try this: url("file:///MacintoshHDOriginal/Users/lowri/Desktop/acgnx/image s/images/acgn-site-background-X_07.jpg")