By default, the casper theme does not sport an images folder in its assets folder. I created one, and placed a PNG image inside.
Now, in screen.css I am building a header that uses a CSS style, that, in its turn, references the image:
background: url("../images/logo.png");
However, this always returns a 404 - both Chrome and Edge mention that the resource does not exist.
The blog itself is being continuously deployed from a GitHub repo to an Azure website. I restart the website every time I make changes to the CSS, but no variations seem to show the image.
Is there any way to force the assets/images folder to be included in the asset lookup?
One of the easy hacks you can do is adding inline style. Add background-image style in the .hbs file as inline style.
While giving image source use
<img src={{asset "images/logo.png"}}">
I'm petty sure this will work.
or you can just specify the absolute url of the image in the stylesheet
url('domain.com/images/logo.png')
Related
I'm including a CSS file in the head of my wicket page (wicket 1.6) using <wicket:link> tags and it loads fine.
However links to images in my css e.g background-image: url(xxx/xxx/pic.png); wont load.
How do i get wicket to recognise the links to my resources(images) in my css file and change them like when i include <wicket:link><img src="xxx/xxx/pic.png"></wicket:link> in my HTML.
The images have to live next to the css file, i.e. be in the same directory.
check the following link :
http://apache-wicket.1842946.n4.nabble.com/Images-referencing-in-CSS-with-Wicket-td3569363.html
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.
I have a recent WP install that is inserting /css/ in to the url of some background images. When it should be /theme/images/image.png, I get "/theme/css/images/images.png" in the browser inspector. I don't even have any folders in the css folder; the images folder is on the same level.
I have no idea where this is coming from. I've tried all possible url's (images/, ./images, and ../images) other than hardcoding it in, but I should need to do that.
This is a custom theme that's a child of the Whiteboard theme.
Any thoughts?
Paths specified inside a CSS style sheet are relative to that style sheet.
So most likely, you have a CSS file with
background-image: url("images/images.png")
style URLs in it.
The solution might be to change the URLs to
background-image: url("../images/images.png")
Is the theme using get_bloginfo('template_url') or something like get_bloginfo('stylesheet_directory') ? If the background image is being set in PHP somewhere, this could be the issue. More info: http://codex.wordpress.org/Function_Reference/get_bloginfo
If you're setting it in CSS, you might try a relative URL like Pekka suggests, or a root relative URL like /wp-content/themes/[theme name]/
I am working on changing themes dynamically in css files.
I have multiple css files and the images used in the css files are stored in
Content/themes/base/images/image.jpg
But i am not able to see the images
I searced other blogs and some one told me that they are relative the css files and images so i tried to change the default Css file that is Site.css
But i am also not able to view the image
Here is what i tried:
background-image:url('../../images/image.jpg');
Please help me...
you can use it like this: background-image:
url('/Content/themes/base/images/image.jpg'); - not relative
I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work. My image lives in the standard location in my Grails app...
project\web-app\images\outbound-blue.png
In my stylesheet I want to use it as a background image for a class...
.messageimg {
height:17px;
width:16px;
background-image:url(images/outbound-blue.png);
background-repeat:no-repeat;
}
This doesn't work for some reason. My stylesheet is in the normal location too, i.e.
project\web-app\css\main.css
I get a missing image marker when I load the page in the browser. I have checked that I have no typos in names etc. I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.
I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.
So, what am I doing wrong?
A more portable way to specify image locations is to use the resource() function:
.messageimg {
height:17px;
width:16px;
background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
background-repeat:no-repeat;
}
Try adding "../" at the beginning of the URI. For example:
../images/outbound-blue.png
The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the images directory. Currently you have it set up to look for a subdirectory called images in the directory containing stylesheets.
Be aware though. Using $resource{... does not work within a referenced .css file. You need to add a style element.
Typically you would reference a resource in a style sheet as a relative url. The url of your image should be relative to the CSS file's location. So ../images/outbound-blue.png from /appName/css/main.css will be referencing /appName/images/outbound-blue.png
If you are still having issues, You can debug this by using a tool like firebug to inspect the page and verify each step in your style.
Verify that:
The item that you think is being styled is picking up the styles.
The image that you are referencing can be accessed both manually, and via firebug.
The css file that you are loading isn't cached and is actually refreshed by the browser.
So the problem seemed to be that the browser was looking into
http://localhost:8080/<app-name>/assets/images/<background-image-name>
which seems correct but if you inspect other images on the page, they render from the path
http://localhost:8080/<app-name>/assets/background-image-name
So, just by excluding images in your path-name should fix the issue. However, this is just a work around which I am sure would have a better explaination and a solution. Cheers.