I have had an issue using an SVG as a background image for a CSS var
folder stucture:
components
-index.ts
-styles.css
icons
-handle-icon.svg
inside my styles.css, I have:
:host {
--corner-svg: url(../icons/handle-icon.svg);
}
.cont {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: var(--corner-svg);
}
However, in my browser, it doesn't load up the SVG and I see Failed to load resource: the server responded with a status of 404 (Not Found) in the console.
You need to provide a string value as a parameter to the url function, since you are using a relative path.
Replace:
--corner-svg: url(../icons/handle-icon.svg);
with:
--corner-svg: url("../icons/handle-icon.svg");
Related
I cannot set img background in css at all in my react app. but if I style and set img from react component then it works fine, can someone help me out
this will work
const style={
width:'300px',
height:'200px',
backgroundImage: 'url(pictures/backgroundPics/1.jpg)'
}
const Test =()=>(
<div style={style}/>
)
but this won't
import './test.css'
const Test =()=>(
<div className='test'/>
)
css
.test{
background-color: gray;
width: 300px;
height: 200px;
background-image: url(../../public/pictures/randomPics/1.jpg)
}
i have tried to set my css path to many ways I can think of including setting it relative to css file or html file but it either gives me module not found or parse error. my Test component path is src/test/test.js and my css file is in the same test folder. I am using css-loader v0.28.4
It will work if I set web address as the url
background-image: url(http://www.pvhc.net/img226/gzypyldoqaxjhvtyyhei.png)
There's no need to relativity reference the public directory in your CSS. Have you tried:
background-image: url(/pictures/randomPics/1.jpg)
The goal is is to set a fallback image in pure CSS, without using the image() notation. Otherwise, the goal would be this code:
#some-id{
background-image: image('default-image.png', 'fallback-image.png');
}
Indeed, in the context rising this question, the written CSS is processed and the follwing code :
#some-id{
background-image: /*#var default-image */;
}
will return:
#some-id{
background-image: url('/URL/TO/default-image.png');
}
As it is, there is no way to pass more than one parameter to this preprocessor.
One already explored idea would be to set immediately after the same id which have a background-image set to none. Indeed, the preprocessor do return none when there is no matching picture. So, in code:
#some-id{
background-image: /*#var default-image */;
}
#some-id[background-image=none]{
background-image: /*#var fallback-image */;
}
Unfortunately, it seems that it doesn't work.
You can use:
background-image: url("image.png"), url("fallback-image.png");
It will superimpose pictures and so you can play with the images transparency or no to get the expected result.
#some-id {
background-image: url('fallback-image.png');
background-image: image('default-image.png');
}
The following is the screen shot of the project structure , please guide me how to specify the image path url
body {
background-image: url(../WebContent/css/Expenses2.jpg);
}
On giving the above path the jpg file does not come as the background colour.
Given that the css folder is in the same folder as your expenses.jsp file you should just be able to do
css/Expenses2.jpg
So
body {
background-image: url(css/Expenses2.jpg);
}
Simply remove the ... from the url, with ... you are switching to an parent folder
body {
background-image: url(/WebContent/css/Expenses2.jpg);
}
Or
body {
background-image: url(css/Expenses2.jpg);
}
I have 31 icons of a calendar one for each day of the month and my css looks not as good as I would like. Right now I've:
.icon-agenda.day-1, .icon-agenda.day-1:before{
background: url(../images/tiles/agenda/1.png) no-repeat;
}
.icon-agenda.day-2, .icon-agenda.day-2:before{
background: url(../images/tiles/agenda/2.png) no-repeat;
}
.icon-agenda.day-3, .icon-agenda.day-3:before{
background: url(../images/tiles/agenda/3.png) no-repeat;
}
.icon-agenda.day-4, .icon-agenda.day-4:before{
background: url(../images/tiles/agenda/4.png) no-repeat;
}
...
.icon-agenda.day-31, .icon-agenda.day-31:before{
background: url(../images/tiles/agenda/31.png) no-repeat;
}
I would like to replace the above code with something more simple like
.icon-agenda.day-xxx, .icon-agenda.day-xxx:before{
background: url(../images/tiles/agenda/xxx.png) no-repeat;
}
Can I do something like this in CSS?
There's no way (yet) to do this in native CSS. You could use a preprocessor like LESS, but that would generate the same output, only with the added hassle of compiling it, so your current method is the most optimal one as far as this layout goes.
One possible optimization could be to create an entire sprite from all of the images, set it as a background-image for all items with 1 selector like [class*=".icon-agenda.day-"], [class*=".icon-agenda.day-"]:before, and alter the background-position of the separate elements. This would save you requests meaning a faster page load.
As per your comment about using JavaScript, here's a solution that will add an extra <style> tag to the <head> of the page with your CSS:
var styl = document.createElement('style');
for (var i=1; i<=31; i++)
styl.innerHTML += '.icon-agenda.day-'+i+',.icon-agenda.day-'+i+':before{background:url(../images/tiles/agenda/'+i+'.png) no-repeat}';
document.head.appendChild(styl);
At some point in the future, you will be able to do
background-image: attr(data-png url);
which would take the URL from the data-png attribute of each element.
Right now it only works with the content CSS property.
See https://developer.mozilla.org/en-US/docs/Web/CSS/attr.
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