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.
Related
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 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');
}
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.
I cant figure out the right path to use in my CSS file for
html { background-image: url('backgroundImage.jpg'); }
My folder structure is as follows:
..\MySite\ <!-- HTML files here -->
..\MySite\css\
..\MySite\js\
..\MySite\images\ <!-- backgroundImage.jpg here -->
html{ background-image: url('../images/backgroundImage.jpg'); }
../ is telling your CSS file to go one directory back and search for the image from that folder (in this case your root folder)
use html{ background-image: url('/images/backgroundImage.jpg'); }
starting with / means you start at the root of your site
Pretty trivial question. If you are using inline styles (styles inside HTML files) then the following will suffice.
html {
background-image: url('images/backgroundImage.jpg');
}
However if you are referencing images from within the css folder you'll have to use .. traversal to reach the parent folder first.
html {
background-image: url('../images/backgroundImage.jpg');
}
I've found instruction on where to place this image
body { background-image: url(example1.jpg); }
But I can;t figure out how to format or get the "url"( ) it's looking for. Do I need to save it in a different place, or format my image differently?
You could use this CSS:
body {
background: transparent url(http://mydomain/content/image.jpg) no-repeat 0 0;
}
or of course:
body {
background-image: url(content/content/image.jpg);
}
Your URL can be absolute, like in the first example – or relative, like in the second. You have to notice, that when placing a relative path, it is relative to your stylesheet definition, not your HTML-Document. Example with directories:
- webroot
index.html
img/image.jpg
css/main.css
When you put the definition from above into the index.html the URL would be:
url(img/image.jpg)
but when you place it inside the main.css it would be
url(../img/image/jpg)
One final thought on this: If you have blanks/whitespaces in your path, you have to wrap the url in single or double quotes like:
url('image/my image.jpg')
You can use any standard url such as
http://example.com/xx.jpg
or from your directory
/images/xx.jpg
Is this what you are looking for.
You put the url in relative to the stylesheet, NOT the site root. For instance if you have this structure:
root
- images/
- image.gif
- css/
- styles.css
- index.html
The your url path would be url('../images/image.gif');
On an unrelated note (and just because I found this out the other day), if you're using a .htc file (like PIE.htc for IE rounded corners for example) then the behavior url needs to be relative to the root and not the stylesheet.