i have a stupid question,
I want to load background image with the background-image: url(images/background.jpg); function but css file location is css/main.css.
how to do that?
Thanks.
background-image: url("../images/background");
../ puts you one folder back, if for some reason, you would need to go two, use ../../
Also make sure to include extension (jpg/png) of the background image.
Related
I simply want to give my html a CSS background image.
I tried setting it to this:
html {background-image: url('/assets/background.jpg')}
which worked on development, but then when assets are compiled into the Public folder, it's no longer the correct path. This:
html {background-image: url('background.jpg')}
doesn't even work on development.
I'm pretty confused because nobody seems to have had this same problem, but it seems like it should be a pretty common one.
Any light shed would be much appreciated.
if your folder structure is like
/css
/js
/img
In most cases css and images will be in their separate folders so you need to go back one step by using ../ It means it will go back one folder so the correct CSS property would be,
html {background-image: url('../img/background.jpg')}
This will work in all situation and servers unless you chnage the folder structure.
And if your css and images both are in same folder you can just write
html {background-image: url('background.jpg')}
for more information see this thread : How to go up a level in the src path of a URL in HTML?
CSS- tricks blog - Quick Reminder About File Paths
I am trying to setup a simple div which I have done many times in the past but something is going wrong... Here is a fiddle of my code.
http://jsfiddle.net/psychoticpanda/HTtRs/
Either I am going insane, hitting a glitch in something or it is too late for me to code after a 13 hour day of class... Please help me feel sane and help me out! The image works when it is used as <img src="(IMAGE)" /> but when I use it as a background-image: url("image"); in CSS it doesn't work...? I need it to be a background for buttons to go on top without problems! Please help...
If the url() contents are a relative path it is derived from the path of the stylesheet location. So if your stylesheet is /css/file.css and the rule is url(image/filename.png) it will look for it in /css/image/filename.png. You should probably use an absolute path for the image.
Your file path of url("images/map.png") assumes that your images folder is in the same folder as the CSS file. If that's not the case, your path is incorrect. If it is the case, the next thing I'd try (but consider this anyway) is to use background: instead of background-image:—which, on its own, doesn't provide any information about its positioning or whether or not you want the image repeated.
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');
Hi this way i give my image path in css. it works some time but not all the time.my site may have many sub folder and then the below path may not works. so i want to specify path in my css in such a way where ever i am on my site pages or whatever pages i will looking at but image show display on page. so tell me what trick i should apply in my css for specifying which works same way for all the pages. thanks
.labeltag {
background-image: url(../images/arrowbackground.png);
margin:2px;
border-radius:5px;
}
Try finding the image from the root of your site instead:
.labeltag{background-image:url('/images/arrowbackground.png');}
Assuming 'images' is a folder in your root directory
edit: I understand code can be more readable (regarding the suggested edit), but there is a reason I type it like this - it's better performance.
The boss wants the master page's menu to look nicer. I generated my gradient file with one of the tools available on the net, no problem there..
I tried to make a CSS class for each menu item but when I use the background-image directive and the style builder, I get a line like:
background-image: url('file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite/Images/Gradient.png')
...when what I want is
background-image: url('~/Images/Gradient.png')
The first url will, of course, only work when I'm debugging on my local machine - deploy this and I'm hosed. So many other ASP.NET objects work with "~/" to indicate the top-level directory of the website but my css file doesn't like it and I can't set a background image for the menu control or the menu items - seems like a GLARING omission when I can do it to so many other controls.
What am I missing?
The url in your CSS needs to be an absolute (or relative) url and not use the tilde mapping as it is not a server-side component.
background-image: url( "/images/menu.jpg" );
You're almost there... try this:
.menuStyle
{
background-image: url('/images/BG.gif'); /* Putting a slash in front means its relative to the root. No slash would be relative to the current directory. */
background-repeat: repeat-x; /* assuming you have a vertical gradient. */
}
Hope that helps.
It's not a glaring omission. Not an omission at all. The tilde is an ASP construct. In your CSS it won't have any meaning.
One "replace all" operation and you're set.
Replace file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite with blank.
I have tried setting the background-image property from CSS in my ASP.Net application (i.e. giving the relative path as described in the post). However, it did not work for me. Later, setting the background-image as background-image:url('http://localhost:1701/Images/BannerTileBackground.gif'); it did work..
Please let me know what is the correct approach, and the reason why it didn't work before.