I'm trying to show a SVG image using mask but in Firefox it isn't appearing. My CSS class is as follows:
.myClass {
-webkit-mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
background: rgba(67, 67, 67, 0.8);
width: 1.15em;
height: 1em;
}
And html code is just a simple:
<div class="myClass"></div>
In chrome, my masked arrow-down.svg is showing nicely but in firefox a div with specified background is appearing. Any idea on how to solve my problem?
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
is invalid. You can't have a mask that's an entire SVG file, it must have a fragment identifier that points to a mask element.
On top of that, Firefox currently doesn't support any additional parameters beyond the url so the no-repeat 100% 100% will cause it to fail.
For Firefox what you need is something like this:
mask: url('../img/arrow-down.svg#maskelement')
where maskelement would be the id of a <mask> element within the arrow-down.svg file.
For anyone who may still be wandering, the following works fine for me, by inserting the encoded svg string as a data uri (not base64!):
.my-class {
--svg-icon: url('data:image/svg+xml;utf8,...');
mask: var(--svg-icon) no-repeat;
mask-size: 100% 100%;
-webkit-mask: var(--svg-icon) no-repeat;
-webkit-mask-size: 100% 100%;
background-color: currentColor;
height: 1em;
width: 1em;
}
I was able to pull this off thanks to some nice tutorials/examples by Anthony Fu and Noah Blon:
Icons in Pure CSS
Iconify source code
Coloring SVGs in CSS Background Images
Related
Is there a way to disable background smoothing in Safari?
I'm trying to make, for example, the tiled background like this:
div#dashed
{
width: 10rem;
height: 7rem;
border: 1px solid #000;
background: url("https://tut.etogo.net/_files/diagonalbg.png");
}
<div id="dashed">
So, the background is like that:
And I expect the background to look like that (zoomed):
But in Safari it looks like that:
Zoomed:
So, I see Safari does some antialiasing/smoothing on the edges - is there a way to disable it? I tried different "image-rendering" parameters but with no success. Tried that in IE, Edge, FF, Chrome and Opera - everything renders fine, but not in Safari. maybe there's some css for that?
As an alternative to using an image, you can achieve the same effect with pure CSS.
.gradient {
width: 200px;
height: 200px;
background: repeating-linear-gradient(-45deg, #000, #fff 1px, #fff 15px);
}
<div class="gradient"></div>
You might want to fiddle around to reach the desired outcome.
A bit more info, and tips can be found on https://css-tricks.com/stripes-css/
I think this is because your background was repeat.
You can try it
background-size:cover;
background-repeat: no-repeat;
Setting size for your background-image.
I am testing my website and I noticed that in Safari it looks different to Chrome and Mozila. Checked my html and css in validator and it all seems fine, so not sure why is this happening.
I validated html and css and found 1 mistake in HTML and 3 in CSS, although its a first attempt so its messy, i think, but what could make this happening?
Bellow is banner's css, can this linear gradient affect it?
Guys I'm total noob, its my first ever attempt, so when answer, please speak english language first of all, and than code-language :).
.main-header {
width: 100%;
box-sizing: border-box;
margin: auto;
height: 750px;
background:
linear-gradient(0deg, whitesmoke, transparent 70%, rgba(200,216,239,1)),
url('../img/MainGib.jpeg') no-repeat center;
background-size: cover;
text-align: center;
}
Not sure, but you might have to add css for -moz and -webkit:
-webkit-linear-gradient(0deg, whitesmoke, transparent 70%, rgba(200,216,239,1)),
url('../img/MainGib.jpeg') no-repeat center;
-moz-linear-gradient(0deg, whitesmoke, transparent 70%, rgba(200,216,239,1)),
url('../img/MainGib.jpeg') no-repeat center;
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 will like to get help please with an issue I got in both IE11 and Opera with CSS SVG sprite.
For some reason both of these browsers are showing the SVG in a very wrong way and some times even not at all.
Here's my code which works great on Chrome, Safari and Firefox:
.item {
width: 50px;
height: 50px;
float: left;
margin-right: 40px;
background: #eee url('1.svg') no-repeat 0 0;
}
.item.i1 {
background-position: 5% 40%;
background-size: 440%;
}
.item.i2 {
background-position: 43.3% 40%;
background-size: 417%;
}
.item.i3 {
background-position: 82.6% 40%;
background-size: 404%;
}
A live jsfiddle demo: http://jsfiddle.net/DBH29/
Am I missing something? if not and my code is fine, and there's no way to fix it, then how can I make a CSS fallback to an image (PNG) or how to detect it with Modernizr please?
possible related to: SVG in Opera using CSS background-image with scaling , in short to work with Opera 12:
"Removing the width and height attributes in the svg"
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');
}
});
}