Hello I have seen few forums talking about this, and lots of suggestions but not a clear solution, at least one with an explanation. I am having issues loading a background image using LESS Loader in Webpack.
`publicPath: './bin/'`
`loader: extractLESS.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!less')`
The issue is that if I inspect the class I get the path non resolved, just as typed on LESS file.
`.secondComponent__imagen___2-dKX {
color: black;
background-image: url(/rock.png);
}`
Thank you in advance.
Using a LESS function to convert the image prevents it from using path.
background-image: data-uri('image/jpeg;base64','./rock.jpg');
Related
I'm using Ionic sidemenu template: ionic start myApp sidemenu
It generates a sample project with some useful tools and default configuration.
What I'm trying to accomplish it to make header bar (ion-nav-bar) transparent.
Here is the plunker: https://plnkr.co/edit/qM3YsJ?p=preview
By default it uses (menu.html)
<ion-nav-bar class="bar-stable">
I asked this question a week ago on Ionic forum - https://forum.ionicframework.com/t/how-to-make-nav-bar-transparent/49250 - I even managed to find a workaround but it would be so much easier if I could just just make the header (navigation) bar transparent.
Here is codepen example that works: http://codepen.io/Samurais/pen/dPRMKL
The problem is - the moment I replace with 1.0.0-beta.1 with 1.2.4 it doesn't work anymore.
EDIT:
Many people are suggesting background-color: transparent !important - OBVIOUSLY - but it's not that trivial due to many underlying elements, positioning, translate3D, z-index... I mean that if it was that trivial I'd probably figure it out by now.
Many people are suggesting hiding the nav bar, that's exactly what I did:
I even managed to find a workaround
But it's a workaround as I'm recreating many default, native elements which is not cool.
Finally... It takes 10 seconds to edit the Plunker. It takes 20 seconds to fork it, grab the URL and reply with the actual working URL instead of some untested solution.
Thank you for teaching me how to become better communicator. I thought that statement "I would like to make nav-bar transparent" and the context (links, plunker, alternative solutions, my post on the forum) are making it clear, apparently I need to enhance my communication skills.
Updated plnkr: https://plnkr.co/edit/qM3YsJ?p=preview
ion-content.has-header {
top: 0;
}
.bar {
background-color: transparent;
}
.bar-header {
border-bottom-width: 0px;
}
(it would be cleaner to support transparent class by default)
This is within my css file for the navbar for a HTML website I have this code.
.navbar-inverse{
background-color:#202148;
border-color: #202148;
}
If you want to make the background colour transparent use:
background-color: transparent;
Edit
I found this tutorial that talks about ion-nav-bar.
http://pointdeveloper.com/ionic-change-side-menu-color/
Check it out.
Hope this helps :)
I'm working with a friend on a project with a huge CSS file.
There is a lot of duplication like:
h1 {
color : black;
}
h1 {
color : blue;
width: 30px;
}
The first h1 can be removed, because it will never be used, because fully rewrited by the second. (because it is in the same CSS file)
I would know if it exists a tool that factorizes (and compress) this kind of stuff.
To only have at the end:
h1 {color:blue;width:30px}
PS: If it can be an online tool, it will be perfect!
There's a nice one in ruby: http://zmoazeni.github.io/csscss
In node.js: https://github.com/rbtech/css-purge
Both are very easy to use from command line.
This is also a nice once: http://cssmerge.sourceforge.net
And a plugin for Firefox: https://addons.mozilla.org/en-us/firefox/addon/css-usage
First you can try
CSS usage checker
Then Try these
CSS Compressor
Javascript Compressor
If you are using Firefox, you can use this addon which will help you achieve it.
https://addons.mozilla.org/en-us/firefox/addon/css-usage/
It creates a new css which tells you only used rules and sideline unused one. It also lets you export that css.
I'm having a weird bug in Chrome, I'm applying the following CSS rule to an element:
#element {
background-color: #0E0F10;
background-image: url(images/the_background.jpg);
}
Now the first time I open a new page containing "#element", the background image isn't shown until I refresh the page cache with ctrl+f5.
I tried adding Pragma, Expires and Cache-control meta tags and it don't make any difference.
The only way to make the image to be shown at the first time is to put the absolute url in this way:
#element {
background-color: #0E0F10;
background-image: url(http://site.com/images/the_background.jpg);
}
Now the problem is that I can't hardcode a site url, I need to use a relative or relative to the root path.
Looking around I found a dirty trick for fixing a related bug in Chrome that coincidentally also fixs this problem: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
Basically when I open the page the first time, all the background images are reloaded through JavaScript and from here on it works fine.
However I would like to implement a more elegant fix or find the real cause of the problem.
I'll appreciate any advice.
try
background: #0E0F10 url('http://site.com/images/the_background.jpg');
also, be sure to add a width and a height to your selector!
use relative path in style rule solve my problem. such as image url is "http://site.com/images/the_background.jpg", and your css file url is "http://site.com/stylesheet/style.css", use "../images/the_background.jpg" instead of "/images/the_background.jpg" in your style rule.
I happened to run into the same problem just before I believe.
Since you haven't accepted any of the answers. You might want to try, what worked for me:
Instead of:
background-image: url(images/the_background.jpg);
Change it to:
background-image: url('images/the_background.jpg');
With ticks... It seems odd, but it did the trick for me. Since all of my url's also had an underscore, it might be related to this, though I am not sure.
Anyway, putting the url in quotes, should make it work.
See that this is old question. But just faced the same problem. My problem was related with z-index. Increased value for example z-index:2000; and now as if all works. Just need to check z-index for other elements
If your file structure is like this
Main Folder
css
img
index file
then type this syntax:
#element{
background-image: url(../img/example.jpg);
}
Wrtie this code your bug will be solved.
I'm using svg's as background-images for a responsive layout that recreates a complex brochure in online format.
Everything works perfectly for vector objects however if I embed images on the svg they don't appear on the background.
The strangest thing is if I check the svg on its own, the images are there, so this is kind of annoying!
Does anyone know if it has something to do with the svg configuration or something like that?
How can I solve this and still be able to use the svg as a background-image (background-size:cover rules!)?
Oh I should add that I've seen this "phenom" happen on chrome in my mac, if it's browser specific please say so!
The svg in question is this: http://nonstoptrip.limsomnium.com/img/fundoinfo1.svg
Unfortunately I'm not much of a jsfiddler so I couldn't create something to show you all.
Thanks in advance!
The images will appear if you load the svg at the document level. You can remove this element later and the images won't disappear. You can set it to load into a 1px x 1px element...
function loadSVG(svgpath){
if( /webkit/gi.test(navigator.userAgent.toLowerCase()) ){
var obj = document.createElement("object");
obj.setAttribute("type", "image/svg+xml");
obj.setAttribute("data", svgpath);
obj.setAttribute("width", "1");
obj.setAttribute("height", "1");
obj.setAttribute("style", "width: 0px; height: 0px; position: absolute;visibility : hidden");
document.getElementsByTagName("html")[0].appendChild(obj);
}
}
window.onload = function(){
loadSVG("../img/mySVG.svg");
}
The author of this technique is Dirk Weber, here are more details: http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/
Webkit simply doesn't support this yet I'm afraid. https://bugs.webkit.org/show_bug.cgi?id=63548 is tracking this issue.
#Duopixel, using just "image/xml" for the type attribute also works (I've only tested it in chrome) and doesn't cause a "Resource interpreted as Document but transferred with MIME type image/svg+xml" error (while "image/svg+xml" does). Hope this helps get rid of that annoying error in the console you may be getting!
So i have my website, www.alphenweer.nl, and that uses some images in the template.
Now the images are on the right url, they work fine, but when i load my website the images won't load? You can try it here. Please help, why won't the images load?
Greetings
Ok, so I gave a look at your css :
#header {
border-bottom: 1px solid black;
width: 985px;
background-image: url('http://images.alphenweer.nl/i/header-winter.png');
text-align: center;
height: 250px;
}
Even when I copy the url in my browser, I got a 404, so the image isn't on your webserver.
Ahh no! I found my own answer. I needed to reupload the css files, i forgot =)!
God, i'll understand when you guys are gonna thumb down! =)
if other images are loading and some are not loading on same location then it is due to hyphen that you have in your image name.
Hyphen in names gives problem in many places. Not only in CSS but when access database and table tables, directories and file names etc. So, try to avoid hyphen instead use underscore.
But I do not know why hyphen give problem. If anyone know that, pleas share your knowledge.