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 ?
Related
I need a reference to my dam image [/content/dam/myproject/image_i_need] which is there in css file under client libs. How to change the image path by authoring (without manually changing the path in css file). may be with dialog edit is possible.?
Here is a simple solution that might work:
Make a component that takes an image input reference from DAM by the authors. Generate an inline CSS with the relevant style and a reference to the user selected image. This could be something like below (consider image background example):
.inline-user-class {
background-image: url("/content/dam/myproject/image_i_need");
}
You can then use this inline class with your element as:
<div class='inline-user-class'>
</div>
There are pros and cons of doing this which are associated with inline CSS but given that your users want to treat CSS as content then this is the simplest option.
This pattern is highly discouraged in AEM (or any other CMS) for one simple reason:
CSS is not content
A CMS is primarily designed for content management so unless your authors want to take ownership of the CSS, they shouldn't be treating images referenced from CSS as a content.
Inversely, a CSS should never reference an Asset (image, video, etc.) that can be modified by the authors. In AEM, this means /content/dam should not be referenced in CSS if authors can modify it.
Hope this helps.
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 am building an application using the mean.js framework.
I am adding styles to core.css file in the modules/core/css in the public folder.
But when I do an inspect element on the page I see the styles being overridden by a styles coming from the files like scaffolding.less in the lib\bootstrap\css\less\scaffolding.less, etc.
If not core.css where should I add my style class to make them reflect on my html elements?
What is the ideal way to add style to pages in a mean.js application?
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