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
Related
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')
I changed html code also by changing new directries of css files. How can I solve this matter. I want to add different html files with different css files in the same wamp server. That's why I changed css file folder name.
I want to know how to change css files and images containing folder names without affecting html file view.
It's relative to the stylesheet, but I recommend you to make the URLs relative to your URL:
div#header {
background-image: URL(/images/header-background.jpg);
}
you can move your files around without needing to refactor them in the future.
I use Add-On SDK, and I have a data folder with both a css and a img folders.
The css folder contains a CSS stylesheet injected from the content-script in a page (top or iframe).
I'd like to reference images, located in the img folder, from the CSS (background attribute).
Is there any way to achieve this without using a full-path resource://<extname>/data/img/icon.png ?
I'm trying to get the image in my C:\Images directory, I've seen css about background-image: url() but I can't find a directory based css for that or did I use the wrong css type?
Here's my css so far:
body
{
background-image: url('C:\Images\background.jpg');
background-repeat:repeat;
}
Don't use static paths in your CSS or HTML such as 'C:\Images\background.jpg' This makes your site non-portable and easy to break.
Always use relative paths when referencing the other files in the site. The browser knows how to resolve the path and requests the full path based on where the site is located.
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]/