I am building a meteor application for the first time and have run into some issues. In particular, I'm trying to get a picture viewer to work but the right and left arrows in the navigation buttons seem to be missing. When I attempt to load the images that are supposed to be in the button using google's developer tools, it's being displayed as an empty image. Thus, it's probably a case of me not putting the image file in the appropriate directory and as a result meteor is not able to load it in the css file. I'm not sure if this is the case or it's something else. It's probably not any syntax errors as I'm able to see the arrows in the button when I run the plugin outside of meteor.
Here's the line in my css file:
background: transparent url('themes.gif') no-repeat left top; margin-top: -45px;
So I managed to get it to work. I created a resources directory in the public folder and changed the url in the css file to url("/resources/button"), which seemed to do the trick.
You can leave your CSS as it is and put the themes.gif file in the /public directory of your Meteor app -- then it should be accessible.
Per the docs:
Lastly, the Meteor server will serve any files under the public directory, just like in a Rails or Django project. This is the place for images, favicon.ico, robots.txt, and anything else.
You have to prefix a / in front of your file name.
my web site architecture
body{
background-image: url('image/back1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
Files need put to /public directory and remove "/public" in path from css.
For example:
If Image in path - /public/img/logo.png
Then use below CSS :
background-image('img/logo.png');
Related
So my client insists I have to link the logo and images through a CSS sheet, But the site isn't live or uploaded so how will the website see the linked objects like this.
Example:
background: url("https://mysamplesite/assets/image/header/bullet_mobile_subsmenu.png") left center no-repeat;
Logic tells me that it needs to read:
background: url("image/header/bullet_mobile_subsmenu.png") left center no-repeat;
But it isn't a URL, is it? what should it say instead of URL?
I know it sounds novicey... I am a novice, I do what I do and if it isn't broken I do it again and again.
Thanks all.
It is a relative URL, which guides the browser on reaching the file relative to the current location.
If you set it inside a CSS file, make sure the path you mention is relative to the source of the CSS file and not relative to the document (as suggested here).
I'm trying to get the image in my C:\Images directory, I've seen css about background-image: url() but I can't find a directory based css for that or did I use the wrong css type?
Here's my css so far:
body
{
background-image: url('C:\Images\background.jpg');
background-repeat:repeat;
}
Don't use static paths in your CSS or HTML such as 'C:\Images\background.jpg' This makes your site non-portable and easy to break.
Always use relative paths when referencing the other files in the site. The browser knows how to resolve the path and requests the full path based on where the site is located.
I am developing the windows mobile app using Phonegap or Cordova framework using. I place the CSS file some of the background images like
footer ul li {
float: left;
padding: 5% 10.9%;
background: url(./img/tabs.png) top left no-repeat;
}
This above CSS file I am using in different places. But it is not loading proper manner. Some pages images are missing. Some pages images are displaying.
How to place the full image path in the CSS file? I placing the Android "file:///android_asset/www/images/tabs.png". In Windows, how to place the full path in the CSS file?
it would be the Build Action of your image file is incorrect.
To change the Build Action right click a file and choose properties to go to the properties window if you do not already have it open. It is probably then the first property. Just click and choose the correct one.
For anyone following along, to change a file from Resource to Content:
In Solution Explorer, navigate to the file.
Multi-select (control-click) all image files (.png, .jpg, etc)
Alt-Enter, or right-click -> Properties
Build Action: in the combo/drop down, choose Content.
Deploy project.
I'm coding this Wordpress site http://searchanddevelop.ca/adv/ where I have a stylesheet in which I frequently refer to external background images.
I don't want to hard link these images, but when I use relative links the Wordpress permalink structure breaks everything as it nests inner-pages inside directories (or pseudo-directories, I guess).
Click on a page in the URL I cited and you'll see what I mean.
.area-heading {
background: url('../../../images/titlechevron.png') no-repeat left;
margin: 2px 0 11px 2px;
height: 16px;
}
Also, if I link things relative to the domain root then when I move the site out of the test directory /adv/ and to its own domain, I expect all the background images will break.
What's the best way to link my images relatively here? I feel like I'm missing a core concept.
With WordPress, the easiest way to keep your images intact is to put them into the theme folder - (where your style.css file is) - then, regardless of where you have the site installed, the images are going to be in the same place relative to the style.css file.
Generally, I create a folder called "images" and place this into my theme folder. Then to link to the images, I would be able to use (in the stylesheet) url('images/photo.jpg'), etc.
The theme file will then contain everything needed by the theme to display correctly- all your styling, images, & theme files are together.
In an external style sheet, all relative urls are expected to be relative to the CSS document.
/styles/screen.css
/images/foo.png
If screen.css wants to use foo.png as a background image, it would be referenced like so:
.foo {
background: url(../images/foo.png);
}
When you use relative URLs, you can't go around shuffling your CSS files without modifying the paths in those files.
It sounds like you are in need of a test environment where the structure of your assets is identical to that of your live site. Such an environment could be created by setting up a web server on your desktop machine (I personally use a virtual machine running unix on my desktop for my web server), but that is beyond the scope of this question. Setting up symbolic links to your assets in your "test" directory could also work.
This is such a dumb issue, but here we go anyway. Here is my basic structure
/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png
So Content and img are both in my root directory, so to referent the glyph image from my bootstrap.css file I have it like this:
background-image: url("../../img/glyphicons-halflings.png");
Y U NO SHOW?
Is there a .js file I need to check to make sure it is looking in the right directory??
oh and here is a snippet of where I am trying to get the image to render:
<td>
#if (item.Something == true)
{
<i class="icon-ok"></i>
}
else
{
<i class="icon-remove"></i>
}
</td>
UPDATE
There's been a lot of views of this question, so I thought I would share my two cents on it. One note, since posting the question BS 3.0 is now out, so it is possible the structure is different and/or irrelevant, have not looked at it yet. But if you got here, keep in mind this is pre-3.0 Bootstrap.
One thing I have started doing that makes it so I do not really have to mess with anything is bring the entire bootstrap folder into the project, rather than just the css/js/img folders. I typically put it in my root scripts folders with a structure like this:
/scripts
/libs
/boostrap <-- the unzipped folder you get when downloading
/js
/css
/img
This may break some conventions since a 'scripts' folder should really just hold scripts. I justify it since I use the scripts folder for scripts (surprise!) and third party libraries (thus the libs folder). Most third party components you get have at least js and css files with them, and I just got too lazy to can them manually separated since some libraries (like bootstrap) rely on where the other files are.
Anyway, my two cents, take a look at the answers below if you want to alter the file locations. All great tips, thanks SO folks!
Your current code should technically work and there is no need of any js file..
background-image: url("../../img/glyphicons-halflings.png"); is perfectly fine for a directory structure like
/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png
You may try this code below to ensure that things are fine..
<td><i class="icon-ok"></i></td>
If this also fails then double check that glyphicons-halflings.png exists at your said path alongwith sufficient privileges..
try this
background-image: url("/img/glyphicons-halflings.png");
I changed the path from a relative path to an absolute path. By adding the slash at the beginning of the path, it starts from the root of your site.
Let me know if that works for you.
I encountered this same issue and it is not related to the source or location of your glyphicons. This is a race issue. I unfortunately cannot tell you the reason why it behaves like this in tables... but I know in my dataTables this was occuring and my way around it was to add the glyphicons after the page and tables load by appending html. It's not perfect but it works.
This may be an old post but I hope it helps someone else looking for an answer to this problem.
The file I downloaded contains an underscore but the CSS is looking for a file with a dash between glyphicons and halflings. Change one or the other and make sure it is uploaded to the correct folder on your server.
Copy the glyphicons-halflings.png & glyphicons-halflings-white.png From img Folder.
make a sub-folder with name "img" in css folder.
Paste the both glyphicons-halflings.png & glyphicons-halflings-white.png in css->img folder.
Open your bootstrap stylesheet e.g. Let's Say bootstrap.css in text Editor.
Find (Ctrl+F) "icon".
6.You will find the class.
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
change the background image url to
background-image: url("img/glyphicons-halflings.png");
find "glyphicons-halflings-white.png"
Change it's path also.
And Bingo! you are on it.
I encountered this same problem today and it had me confused. As Rishi says above, it should work, but it just didn't. I triple-checked my directory structure. Then eventually I realised that it wasn't hitting my glyphicons file at all. I removed this offending line of css:
<link href="css/font-awesome.min.css" rel="stylesheet"> <!-- remove me -->
And everything was good!
Remember that if you're going to include font-awesome, then it will look for the font files instead of the glyphicons file. So either add the appropriate fonts, or just use plain old bootstrap.
The glyph icons load only when you have the following files in the fonts folder.
glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf and glyphicons-halflings-regular.woff.
Download the theme template or the carousel template of bootstrap, and you'll find these files there.
To know where to place these files in your web folder, just run Link Checker or Xenu's link sleuth and it'll show you where to place those files.