my project's resources ：
|--static
|----img
|------foo.jpg
|----css
|------style.css
|--templates
|----index.html
i want load foo.jpg from img directory.in index.html , it works in follows :
.foo{
background-image:url("../../img/foo.png")
}
but it not working anymore when i move it into the style.css like :
.foo{
background-image:url("../img/foo.png")
}
actually,i had revised the relative path to foo.img,
how can i correctly load this image ?
make sure that which you are using as a image type, once you using background-image:url("../img/foo.png") as a PNG but in your folder its a JPG file.
Related
I want to create an extension which contains an AssetBundle, which provides a simple static CSS file. In that static CSS file, I want to use an image file, which is also part of the extension.
How can I know the image file's URL so I can use it inside the CSS file?
If I register the image file as an asset, it will get a random URL that we cannot predict! So it would be impossible to do something like:
.some-selector {
background: url('/assets/?????/image.jpg');
}
So, how can this be done?
For further clarification, here is an example folder structure of such extension:
extension/Widget.php - some widget that registers our AssetBundle
extension/AssetBundle.php - asset bundle that registers the css
extension/assets/css/style.css - the css
extension/assets/images/image.jpg - the image we want to use inside style.css
In this case I would recommend to include also a new css files into the asset definition. In this case the image and css file will be in the assets folder and you can specify relative path, not absolute.
e.g.
/assets/a4dc56/image.jpg
/assets/a4dc56/style.css with the following content:
.some-selector {
background: url('image.jpg');
}
I'm following a tutorial of a responsive website using Jekyll.
I'm working on the header now and I'm trying to use an image as the background of the header, but I'm having problem to find the relative path for this image.
This is the path of the image in my computer: /Users/CaroleCarlos/Pictures/60H.png
and
This is the path of the folder I'm saving my project: /Users/CaroleCarlos/Desktop/DevTips-Starter-Kit-Jekyll-Starter-Kit
I'm using the following code to set the image as the background using sass:
header {
height: 450px;
background: url(../Pictures/60H.png);
}
but I does not work. I've tried another paths also but I don't know what I'm doing wrong that I can't find the image.
I'm using Expresso as my text editor.
I know it is not a hard thing to solve, but I've been trying to make it work for a while now, and I can't figure it out.
You need to go two directories back like the below code. ../ is a filler for each directory level in relative paths.
header {
height: 450px;
background: url(../../Pictures/60H.png);
}
I would recomment you to make your projet in on folder to prevent this.
you should make a folder images like so : /Users/CaroleCarlos/Desktop/DevTips-Starter-Kit-Jekyll-Starter-Kit/images
Then your path should me background: url(images/60H.png)
I have a background image that I would like to use in my Java FX Application but I assume that I am unable to get the path (URL?) for the image right. I want to only use CSS files to do this and I prefer not to inline the code. I searched Google but everyone gives examples using just a single package structure. My directory structure looks like this:
src/com/myapp/core (com.myapp.core)
src/com/myapp/view (com.myapp.view)
src/com/myapp/view/css (com.myapp.view.css)
The file DashBoard.fxml is located in com.myapp.view
The css file DashBoardStyle.css is located in com.myapp.view.css
The image file white-texture.jpg is located in com.myapp.view.css
The code in the css file is:
.background {
-fx-background-image: url("src/com/myapp/view/css/white-texture.jpg");
-fx-background-repeat: repeat;
}
The relevant code in the DashBoard.fxml file is
<stylesheets>
<URL value="#css/DashBoardStyle.css" />
</stylesheets>
An image in the same directory as the css file doesn't need any relative path information. So just use -fx-background-image: url("white-texture.jpg"); .
If it's not in the same directory, then you have to add a relative path. eg. images/image.jpg if it's in a sub dir. Or like ../images/image.jpg to go 'up' a directory then into the images dir.
The relative path starts with both System.getProperty("user.dir") location and the location where your source (*.java) files are located.
#main {
background: url("images/bg_grey.png");
}
I have this code into my main.css but GWT can't find the image (it is into the default images folder of my GWT-project).
With JAVA there are lots methods like GWT.getModuleBaseURL(), but, into the CSS, how can i recover the correct path for my image?
It's relative to the CSS location.
For example, if the CSS is in /css/myStyle.css, the path for the image would be ../images/bg_grey.png
I am using basic template for mvc 4.I want set background image for my div element.My stylesheet located in "~/Content" directory.Here is part of my .cshtml file where I am trying direct specify image without css:
<div id="add_image" class ="image_bar" style="background-image:url(add.jpg)" ></div>
Here is my css:
#add_image {
background-image:url('~/add.jpg');
}
#add_image:hover {
background-image:url('~/addhover.jpg');
}
.image_bar {
width:40px;
height:40px;
}
Neither css neither direct "styling" not works - whats wrong? Thanks.
In your second example, you are using the '~/' moniker, this is a .NET thing that instructs the code to look at the root of the site. Since the .NET engine does not process your CSS file, the '~/' has no effect and probably makes a really ugly HTTP request to the server.
Since you have your CSS in your Content directory, one solution is to create a sub directory in your Content called 'images'. Store any and all of your CSS images in that folder. Then, from your CSS file, you can call and reference images in that file as such:
#add_image {
background-image:url('images/add.jpg');
}
#add_image:hover {
background-image:url('images/addhover.jpg');
}
This is assuming a directory structure like so:
Content
images
add.jpg
addhover.jpg
site.css
Though I am not a designer, I believe that CSS will look for images relative to the location of the CSS file and not the root of the web application like HTML. Additionally, if you stored images in the same directory as your CSS file, then you should be able to call those images without the 'images/' prefix. However, most like to keep resources separate.
Instead of
background-image:url('~/add.jpg');
try using
background-image:url('./add.jpg');
try with
background-image:url('../add.jpg');
try this
**example -
background-image:url('../img/home_bg.jpg');**
background-image:url('../**ImageFolderName**/add.jpg');