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);
}
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 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");
I am trying to get my home page to display a random banner every time the site is loaded.
I used the following code in my functions.php file -
add_filter('body_class','random_background_images');
function random_background_images($classes) {
// Generate Random number from 1 to 10.
$background_class = 'background_' . rand(1,10);
$classes[] = $background_class;
return $classes;
}
and then this in my custom.css file -
body.background_1 {
background-image: url("images/home-bg/website-background1.jpg");
}
body.background_2 {
background-image: url("images/home-bg/website-background2.jpg");
}
body.background_3 {
background-image: url("images/home-bg/website-background3.jpg");
}
it seems to work, but puts the image as a background image, not a banner.
Can anyone please help me change this code so it will apply to the banner section?
(The current banner is set from the front end with an uploaded image in the 'home' page setup.
Website is - https://flowersforeveryone.feedmybeta.com/
Thanks! :)
So this would depend on the html for the banner. Assuming the banner has a class of .page-banner, you could change your CSS slightly thusly:
body.background_1 .page-banner {
background-image: url("images/home-bg/website-background1.jpg");
}
body.background_2 .page-banner {
background-image: url("images/home-bg/website-background2.jpg");
}
body.background_3 .page-banner {
background-image: url("images/home-bg/website-background3.jpg");
}
In CSS, the selector that comes after a space is a child of the previous selector.
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")});
}
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