I have a react application in which on checking certain checkboxes I am adding or changing a certain image icon.
.checkbox1:checked ~ .icon-span {
background: url('../../../../assets/images/icon_plus.svg');
}
Which is giving me this:
background: url([object Module]); //invalid property value
But path is correct, how do I correct this?
This should work
.checkbox1:checked ~ .icon-span {
background: url(${require("../../../../assets/images/icon_plus.svg")});
}
Related
I am using react-simple-image slider and everything works smoothly but I dont get how to adjust the image to fit to the slider container. The documentation says this:
can customize by className with !important;
.your-app {
.rsis-container {
// do something
}
}
.your-app {
.rsis-image {
background-size: contain !important;
}
}
but I dont understand where to add it in my project (please see files)
files
I need to be able to use CSS variables because I need to have an hover effect (background-color) to be customizable by my VueJs app.
But my CSS stylesheet should have a default value, which is stored in a nested SCSS map. (map-getter is a function which returns values from nested maps)
I know that my SCSS code works, because I get the intended result when I do this:
.theme--dark .AppNavTile:hover {
background-color: map-getter($theme-dark, AppNav, hover);
//returns background-color: rgba(255, 255, 255, 0.87); in my browser's console
}
In order to use CSS variables, I can modify the code as follows:
.theme--dark .AppNavTile:hover {
--hover-bg-color: red;
background-color: var(--hover-bg-color);
}
It works fine and I have a red background when hovering the element.
Then I try to combine both:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
According to by browser's console, this returns the following:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
So it seems that the SCSS code remains uncompiled in the CSS variable. Is there any way around it?
Thanks!
The "problem" with CSS variables is they can have any value – why map-getter($theme-dark, AppNav, hover) is rendered as is. To instruct SCSS that this is actual SCSS code and not a random string you need to use interpolation (like if you use SCSS variables inside calc):
--hover-bg-color: #{map-getter($theme-dark, AppNav, hover)};
I want to update the background image dynamically using CSS variables.
app-header {
background-color: var(--paper-red-500);
--app-header-background-front-layer: {
background-image: url(var(--profile-cover));
};
}
But it won't update using this approach:
this.customStyle['--profile-cover'] = url;
this.updateStyles();
The app-header element is made from Polymer :)
Any answers?
I got it,
this.customStyle['--profile-cover'] = 'url(\'' + url + '\')'
So basically I have to change the CSS:
background-image: var(--profile-cover);
I am using the LESS styling language.
Consider the following CSS:
.side-bg
{
background:url(../img/layout/side-bg.jpg) top no-repeat;
}
Right now all of my images are in the folder ../img/ I wanted to be able to set a variable as the image path and use it like so:
#image-path: ../img;
.side-bg
{
background:url(#image-path/layout/side-bg.jpg) top no-repeat;
}
This does not work however. Its not a huge deal, I could always use find and replace if the image folder ever changed. I am just starting to learn LESS and was wondering if something like this is possible.
Try using string interpolation for things like this. Look for “variable interpolation” in docs.
#base-url: "http://assets.fnord.com";
background-image: url("#{base-url}/images/bg.png");
The solution:
.side-bg
{
background : ~"url( '#{image-path}/layout/side-bg.jpg' )" top no-repeat;
}
I was searching for the same question and found this page. Thought I would post my solution as someone else might find it useful...
#iconpath: '/myicons/';
.icon (#icon) {
background: no-repeat url('#{iconpath}#{icon}');
}
.icon-foo { .icon('foo.png'); }
.icon-bar { .icon('bar.png'); }
.icon-spuds { .icon('spuds.png'); }
which compiles to (used http://winless.org/online-less-compiler)
.icon-foo {
background: no-repeat url('/myicons/foo.png');
}
.icon-bar {
background: no-repeat url('/myicons/bar.png');
}
.icon-spuds {
background: no-repeat url('/myicons/spuds.png');
}
Here is an updated and clean way to handle image paths with LESS:
Start with your variable:
#imagePath: ~"../images/bg/";
Then use it like this:
.main-bg {
background: url('#{imagePath}my-background-image.png') repeat scroll left top;
}
Make sure the #imagePath variable points to the images folder from wherever you have your compiled CSS, NOT from where you have your LESS files. Also, you have to escape the address in the variable as in the example above to ensure that it does not get rewritten by less.js.
Anton Strogonoff's answer is good but be aware of the Issue #294:
Using the above which comes straight from the docs, I get url://pathtolessfile/variable I set. Even though I'm trying to set an absolute URL instead of a relative one. For example this works
#base-url: "../../images/";
#background-image : url ("#{base-url}/bg.png");
But this does not work
$base-url: "http://localhost/ns/assets/images/";
#background-image : url ("#{base-url}/bg.png";
In the latter example, my final source path becomes
http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png
Relative urls can be handled by the command line compiler, supposedly. There's probably some similar option you can set in the file watcher.
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage
EDIT: There totally is. Just look: http://lesscss.org/usage/#command-line-usage-options
relativeUrls: true
I'm trying to create faked transparent form fields that "show through" to the background which is a tiled image (which of course are "showing" through the numerous divs between the inputs and the page background). Here's where I'm at:
div#searchbox, div#mailing_list ul li.fields,div#product div.info input.text {
border:1px solid #707070;
background:url(../_images/fade_bg.jpg) 0 0 repeat;
}
input#search {
background-position:-715px -163px;
}
input#name {
background-position:-134px -888px;
}
input#duhlyh-duhlyh {
background-position:-134px -926px;
}
Now, this works as expected except the background position property isn't doing anything. I can remove them, change them, nothing happens. I'm guessing that it has something to do with the fact it's a repeating background. The position values are the element offsets from the body where the background itself starts. Any way to line these up?
inputs are very hard to style using css.
However, what you could try (works in Firefox) is to remove the background image from the inputs and give them a background:transparent so that the background of the parent shows through.
Try using CSS nesting for this code
input#search {
background-position:-715px -163px;
}
input#name {
background-position:-134px -888px;
}
input#duhlyh-duhlyh {
background-position:-134px -926px;
}
with their respective parent elements because sometimes what happens is some properties are overwritten. in that case you can use css nesting and make it work