Hello I have been trying to fix this issue all day. With Chrome's latest release
Version 53.0.2785.116 m
The svg sprites I had been using no longer appear. They appear in their correct positions in firefox and ie with no issues.
I looked at the release notes and could find nothing mentioning SVG. I really don't know how to remedy this problem since they show on all other browsers. Does any one have any clue?
Here is the some code I'm using for reference
&.ico-nav {
width: 60px;
height: 60px;
border: 2px solid #eia_green;
border-radius: 100%;
float: left;
margin: 0 15px 15px 0;
background: url(../images/global-nav-icons.svg) no-repeat;
background-size: 1700% 1700%;
/*Sources and Uses Menu*/
&.petro {
background-position: -20px -225px;
}
&.natural {
background-position: -20px -330px;
}
&.elec {
background-position: -20px -430px;
}
&.con {
background-position: -20px -530px;
}
&.coal {
background-position: -20px -635px;
}
&.renew {
background-position: -20px -735px;
}
I also have used the symbol and defs method for calling SVG inline and that has not worked either.
I have played around with dimensions and have gotten a icon to show but not with out truncating the sprite itself which has about 80 icons in total on it.
Any help is appreciated.
EDIT-----------------------------!
This issue appears to be related to SVG and border radius. My SVGs look normal on Chrome Canary (Beta) and hopefully the change is coming down the pipeline.
Here is a chromium bug that was related to my issue so the devs at Chrome are aware!
Hope this helps anyone experiencing anything similar.
https://bugs.chromium.org/p/chromium/issues/detail?id=643623
How can I tint a background image that has transparent sections?
I have tried using background-blend-mode: multiply with background-image and background-color. It works great for opaque images, but does not take the transparency into account, leaving a colored square around the image.
I am using svg images, and could switch to using <img> instead of backgrounds if necessary.
Example:
Left side is my goal, right side is what I get with background-blend-mode: multiply. The base image is a light gray circle, and I multiplied it with red.
Edit: I created a codepen to better illustrate my problem and what I have tried. http://codepen.io/anon/pen/QbbbpZ It has both the original image and my goal (made in Photoshop) on top, with examples of what I have tried below.
Edit2: I'm beginning to wonder if it is even possible to do this with plain HTML/CSS. Would using something like canvas, maybe with shaders, be more appropriate? Is there a library out there for it?
In webkit (Safari, Chrome and Opera) you can use -webkit-mask-image to do the effect.
html:
<div id="blend-mask" class="uiElement uiBG"></div>
css:
#blend-mask {
-webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
background-color: #f00;
background-blend-mode: multiply;
}
#goal {
background-image: url("http://i.imgur.com/JLjAor5.png");
}
#pageBG {
width: 400px;
height: 400px;
background-image: url("http://lorempixel.com/g/400/200/");
background-color: rgba(255,0,0,0.25);
background-blend-mode: multiply;
color: white;
text-shadow: 0 0 0.25em black;
}
.uiElement {
width: 100px;
height: 100px;
margin: 25px;
display: inline-block;
}
.uiBG {
background-size: contain;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/rkRJbzH.png");
}
Example working:
http://codepen.io/anon/pen/vONVry
if you want to make it work as well in firefox check this post maybe will help:
Is there a -moz-mask CSS property, like -webkit-mask-image?
As well you can check using canvas to tint, there is this post that maybe can help:
http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/
I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.
I am using background-position and it works fine in Chrome but on Firefox and IE it doesn't work as it should.
.badge {
background: url(badge.png) no-repeat;
background-position: 0px 1px;
display: inline-block;
color: #9e988e;
font-size: 12px;
padding-left: 15px;
What shall I use to make it same in all browsers?
JSFIDDLE
Internet Explorer does this with background-position-x or background-position-y. Firefox doesn’t support that..
just came across a similar issue today.
This can get a little weird, but try adding this to your style.
Example
background-position-x: 54%;
background-position-y: 10%;
You may have to mess around with the exact position, but most browsers accept it.
In my code the background-position-y doesn't work. In Chrome it's ok, but not working in Firefox.
Anyone have any solution?
If your position-x is 0, there's no other solution than writing :
background-position: 0 100px;
background-position-x is a non-standard implementation coming from IE. Chrome did copy it, but sadly not firefox...
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left)
In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
Use this
background: url("path-to-url.png") 89px 78px no-repeat;
Instead of this
background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;
Firefox 49 will be released—with support for background-position-[xy]—in September 2016. For older versions up to 31, you can use CSS variables to achieve positioning the background on a single axis similar to using background-position-x or background-position-y. CSS variables reached Candidate Recommendation status in December 2015.
The following is a fully cross-browser example of modifying background position axes for sprite images on hover:
:root {
--bgX: 0px;
--bgY: 0px;
}
a {
background-position: 0px 0px;
background-position: var(--bgX) var(--bgY);
}
a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px; }
a.gplus { background-position-y: -40px; --bgY: -40px; }
background-position-y :10px; is not working in Firefox web browser.
You should follow this type of syntax:
background-position: 10px 15px;
10px is bounded to "position-x" and 15px bounded to "position-y"
100% working Solution
Follow this URL for more examples
Why don't you use background-position directly?
Use:
background-position : 40% 56%;
Instead Of:
background-position-x : 40%;
background-position-y : 56%
background: url("path") 89px 78px no-repeat;
Will not work if you want a background along with the image. So use:
background: orange url("path-to-image.png") 89px 78px no-repeat;
This worked for me:
a {
background-image: url(/image.jpg);
width: 228px;
height: 78px;
display: inline-block;
}
a:hover {
background-position: 0 -78px;
background-repeat: no-repeat;
}
Make certain you explicitly state the measurement of your offset. I came across this exact issue today, and it was due to how browsers interpret the values you provide in your CSS.
For example, this works perfectly in Chrome:
background: url("my-image.png") 100 100 no-repeat;
But, for Firefox and IE, you need to write:
background: url("my-image.png") 100px 100px no-repeat;
Hope this helps.
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left) In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
Mine has the exact problem as stated by Orabîg which has a table like sprite which has columns and rows.
Below is what I used as a workaround using js
firefoxFixBackgroundposition:function(){
$('.circle').on({
mouseenter: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');
},
mouseleave: function(){
$(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');
}
});
}