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');
}
Related
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.
I have this code
a:after{
content url:(/path to my image/my_image.png)
......
}
and it works fine. But I am now migrating my site to WordPress. I can't use the WordPress function get_theme_file_uri(); to get my image path Or is there another alternative.
Unless you're running your CSS documents through a PHP eval() function (which you shouldn't do by most standards) there isn't a good way to execture PHP inside of CSS. The best way to solve your issue is linking directly to the image.
Assuming your directory structure is something like:
[..]
[wp-admin]
[wp-content]
[uploads]
[images]
--my-image.jpg--
[wp-includes]
--other files--
You could use it by simply using a relative path to the file, like:
a::after {
content: url(/wp-content/uploads/images/my-image.jpg);
}
CSS urls are relative to the CSS file.
if you have structure like
..
images
my_image.png
index.php
style.css
you can use a relative URL like:
a:after{
content url:(images/my_image.png)
}
I'm trying to link to an image in the WordPress plugins folder from style.css. I've tried the following but that doesn't work:
.example {
background: url( images/photo.jpg ) center center no-repeat;
}
Plugins folder image: /wp-content/plugins/my-plugin/images/photo.jpg
Stylesheet is here: /wp-content/themes/my-theme/style.css
I know you added the "relative-path" tag, but have you tried using an absolute path, including the domain name?
Consider trying
.example {
background: url('http://full-path.com/wp-content/plugins/my-plugin/images/photo.jpg') center center no-repeat;
}
If you want to use a relative path, it also looks like you could try:
../../plugins/my-plugin/images/photo.jpg
This assumes the server is looking from the folder the CSS is in to resolve the path to the photo. The ".." represents moving up a directory level.
Hope this helps!
You can use so called semi-relative paths for resources:
.example {
background-image: url( '/wp-content/plugins/path/to/image.jpg' );
}
/wp-content/ above maps to http://www.domain.xyz/wp-content/, which allows you to omit the domain portion from the URL path to the image. If you omit the starting / character, the stylesheet will look for wp-content/... within the directory where the CSS file is.
Note: the above method wont work if your plugins directory is outside wp-content.
If you want the exact plugin directory path using WordPress functions and constants, consider infusing CSS with PHP: http://css-tricks.com/css-variables-with-php/. This way you can execute some PHP within the CSS file, which could include fetching the WP plugins directory to a PHP variable.
#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');